[JavaScript知识库]Vuex的使用和模块化管理

什么是vuex？官方的解释是这样的。

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

这种状态管理库的出发点都是为了维护庞大不可控的状态。

安装

cnpm install vuex --save

新建store文件并且引入vuex

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

然后在main.js中挂载

然后就可以正式写业务啦。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
export default new Vuex.Store({
    // 要设置全局访问的state对象
    state: {
        userName: "",
        token: "",
        count: 0
    },
    // 对state中的数据进行操作
    mutations: {
        addCount(state, num) {
            state.count += num;
        },
        resetCount(state) {
            state.count = 0
        },
        setToken(state, data) {
            state.token = data
        }
    },
    // 获取数据
    getters: {
        getUserName(state) {
            return state.userName;
        },
        getToken(state) {
            return state.token;
        },
        getCount(state) {
            return state.count
        }
    },
    // 异步操作
    actions: {
        getToken(context) {
            return new Promise((resolve) => {
                setTimeout(() => {
                    context.commit('setToken', '123')
                    resolve("111")
                }, 1000);
            })
        },

    }
})

在页面中获取一个变量，可以通过这两种方式

var token=this.$store.state.token

var token2=this.$store.getters.getToken

也可以在页面中通过mapstate的方式引入到本页面中，引入以后就可以当作本页面的参数使用了

而修改state不能直接修改，而是通过这种commit方法修改

this.$store.commit('addCount',5)

而调用action的方法需要使用dispatch

this.$store.dispatch('方法名',值)

上面就是简单的使用方法了，但是一旦项目大了起来，那样文件会变的巨大不方便管理，所以这里介绍怎么使用modules动态导入文件

import getters from './getters'

Vue.use(Vuex)
const modulesFiles = require.context('./modules', true, /\.js$/)

const modules = modulesFiles.keys().reduce((modules, modulePath) => {
    const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
    const value = modulesFiles(modulePath)
    modules[moduleName] = value.default
    return modules
}, {})

const store = new Vuex.Store({
    modules,
    getters
})

export default store

模块中代码的写法

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
export default {
    namespaced: true,
    // 要设置全局访问的state对象
    state: {
        userName: "",
        token: "",
        count: 0
    },
    // 对state中的数据进行操作
    mutations: {
        addCount(state, num) {
            state.count += num;
        },
        resetCount(state) {
            state.count = 0
        },
        setToken(state, data) {
            state.token = data
        }
    },

    // 异步操作
    actions: {
        getToken(context) {
            return new Promise((resolve) => {
                setTimeout(() => {
                    context.commit('setToken', '123')
                    resolve("111")
                }, 1000);
            })
        },

    }
}

而通过模块引入的话，使用方法需要加上模块名

this.$store.commit('user/addCount',5)
console.log(this.$store.state.user.count)

如这样

而通过mapState引入也需要做类似处理

...mapState('user',['token','userName','count'])

而使用的时候就不再需要再添加模块名称了

console.log(this.token)