Vuex内容解析和vue cli项目中使用状态管理模式Vuex

Posted 2020-11-01 古兰精

　　中文文档：vuex官方中文网站

一、vuex里面都有些什么内容？

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代码：

　　vuex 包含有五个基本的对象：

　　1、state：存储状态，也就是全局变量；

　　2、getters：派生状态。也就是set、get中的get，有两个可选参数：state、getters，分别可以获取state中的变量和其他的getters。外部调用方式：store.getters.personInfo()，就和vue的computed差不多；

　　3、mutations：提交状态修改。也就是set、get中的set，这是vuex中唯一修改state的方式，但不支持异步操作。第一个参数默认是state，外部调用方式：store.commit(‘SET_AGE‘, 18)，和vue中的methods类似。

　　4、actions：和mutations类似，不过actions支持异步操作。第一个参数默认是和store具有相同参数属性的对象。外部调用方式：store.dispatch(‘nameAsyn‘)。

　　5、modules：store的子模块，内容就相当于是store的一个实例。调用方式和前面介绍的相似，只是要加上当前子模块名，如：store.a.getters.xxx()。

二、vue-cli中使用vuex的方式

　　一般来讲，我们都会采用vue-cli来进行实际的开发，在vue-cli中，开发和调用方式稍微不同。

├── 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

　　state.js示例：

const state = {
    name: ‘weish‘,
    age: 22
};

export default state;

　　getters.js示例（我们一般使用getters来获取state的状态，而不是直接使用state）：

export const name = (state) => {
    return state.name;
}

export const age = (state) => {
    return state.age
}

export const other = (state) => {
    return `My name is ${state.name}, I am ${state.age}.`;
}

　　mutation-type.js示例（我们会将所有mutations的函数名放在这个文件里）：

export const SET_NAME = ‘SET_NAME‘;
export const SET_AGE = ‘SET_AGE‘;

　　mutations.js示例：

import * as types from ‘./mutation-type.js‘;

export default {
    [types.SET_NAME](state, name) {
        state.name = name;
    },
    [types.SET_AGE](state, age) {
        state.age = age;
    }
};

　　actions.js示例（异步操作、多个commit时）：

import * as types from ‘./mutation-type.js‘;

export default {
    nameAsyn({commit}, {age, name}) {
        commit(types.SET_NAME, name);
        commit(types.SET_AGE, age);
    }
};

　　modules--m1.js示例（如果不是很复杂的应用，一般来讲是不会分模块的）：

export default {
    state: {},
    getters: {},
    mutations: {},
    actions: {}
};

　　index.js示例（组装vuex）：

import vue from ‘vue‘;
import vuex from ‘vuex‘;
import state from ‘./state.js‘;
import * as getters from ‘./getters.js‘;
import mutations from ‘./mutations.js‘;
import actions from ‘./actions.js‘;
import m1 from ‘./modules/m1.js‘;
import m2 from ‘./modules/m2.js‘;
import createLogger from ‘vuex/dist/logger‘; // 修改日志

vue.use(vuex);

const debug = process.env.NODE_ENV !== ‘production‘; // 开发环境中为true，否则为false

export default new vuex.Store({
    state,
    getters,
    mutations,
    actions,
    modules: {
        m1,
        m2
    },
    plugins: debug ? [createLogger()] : [] // 开发环境下显示vuex的状态修改
});

　　最后将store实例挂载到main.js里面的vue上去就行了

import store from ‘./store/index.js‘;

new Vue({
  el: ‘#app‘,
  store,
  render: h => h(App)
});

　　在vue组件中使用时，我们通常会使用mapGetters、mapActions、mapMutations，然后就可以按照vue调用methods和computed的方式去调用这些变量或函数，示例如下：

import {mapGetters, mapMutations, mapActions} from ‘vuex‘;
/* 只写组件中的script部分 */
export default {
    computed: {
        ...mapGetters([
            name,
            age
        ])
    },
    methods: {
        ...mapMutations({
            setName: ‘SET_NAME‘,
            setAge: ‘SET_AGE‘
        }),
        ...mapActions([
            nameAsyn
        ])
    }
};

　　以上就是 vuex 的相关知识，其实vuex很简单，多用几次就会熟悉了。