今天的工作内容-----vuex的使用心得:
都知道,对于小型的项目来说不必使用vuex,但是对于需要把共享的变量全部存储在一个对象里面,然后把这个对象放在顶层组件中以供其他组件使用。其实vuex就是类似整个vue项目的全局变量。
const store = new Vuex.Store({ state: { name: 'weish', age: 22 }, getters: { personInfo(state) { return `My name is ${state.name}, I am ${state.age}`; } } mutations: { SET_AGE(state, age) { commit(age, age); } }, actions: { nameAsyn({commit}) { setTimeout(() => { commit('SET_AGE', 18); }, 1000); } }, modules: { a: modulesA } }
这个是最基本完整的vuex代码,包含五个基本对象:
state:存储状态,也就是数据。
getters:派生状态,类似vue中的computed,就是set,get中的get,外部调用方式:store.getters.personInfo().【我们一般使用getters来获取state的状态,而不是直接使用state】。
mutations:提交状态修改。也就是set,这个是vuex中唯一修改state的方式,但是不支持异步操作。第一个参数默认是state,外部调用:store.commit('SET_AGE',18),类似于vue中的mothods。
actions:和mutations类似,不过actions是支持异步操作。第一个参数默认是和store具有相同参数属性的对象。外部调用方式:store.dispatch('nameAsyn')
modules:store的子模块,内容相当于是store的一个实例,调用方法只要加上当前的子模块名,例如:store.a.getters.xxx()
vue-cli中使用vuex的方式
├── index.html ├── main.js ├── components └── store ├── index.js # 我们组装模块并导出 store 的地方 ├── state.js # 跟级别的 state ├── getters.js # 跟级别的 getter ├── mutation-types.js # 根级别的mutations名称(官方推荐mutions方法名使用大写) ├── mutations.js # 根级别的 mutation ├── actions.js # 根级别的 action └── modules ├── m1.js # 模块1 └── m2.js # 模块2