Vuex使用笔记
部署
工程目录下创建./store/index.js
//vuex store
//引入 Vuex , Vue
import Vuex from "vuex";
import Vue from "vue";
Vue.use(Vuex);
//准备 actions 用于响应组件中的动作
const actions = {};
//用于操作数据(state)
const mutations = {};
//用于存储数据
const state = {};
//创建 store 并暴露
export default new Vuex.Store({
actions,
mutations,
state,
});
在 main.js 中配置
import Vue from "vue";
import App from "./App.vue";
import Vuex from "vuex";
import store from "./store/index.js";
Vue.config.productionTip = false;
Vue.use(Vuex);
new Vue({
render: (h) => h(App),
store,
}).$mount("#app");
使用
结构示意
Vue自定义指令总结
语法
- 局部指令
new Vue({
directives:{指令名:配置对象}
})
//or
new Vue({
directives:{指令名:回调函数}
})
- 全局指令
Vue.directives(指令名,配置对象)
//or
Vue.directives(指令名,回调函数)
配置对象中常用的三个回调
- bind:指令与元素成功绑定时调用
- inserted:指令所在元素被插入页面时调用
- update:指令所在模板结构被重新解析时调用
这三个回调函数中的 this 都指向 windows,简写形式只能定义 bind 和 update 两个回调