vuex的使用心得

时间:2022-04-01 16:37:26

今天的工作内容-----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