vuex持久化加模块化

1. 下载持久化插件

npm i vuex-persistedstate

2.目录结构

3.配置index.js和模块

//index.js
import Vue from 'vue';
import Vuex from 'vuex';

import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex);

import getters from './getters';

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

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


const store = new Vuex.Store({
    getters,
    modules,
    plugins: [
        createPersistedState({
            key: 'persisted_data',
            paths: ['user', 'category']
        })
    ]
})

export default store;

//user.js
const state = {
    userObj: {}
}

const mutations = {
    SAVE_USER(state, data) {
        state.userObj = data;
    }
}

const actions = {
    saveUser(context, data) {
        context.commit('SAVE_USER', data)
    }
}

const getters = {

}

export default {
    namespaced: true,
    state,
    mutations,
    actions,
    getters,
}

//getters.js
const getters = {
    categoryList: state => state.category.categoryList
}

export default getters;

4.导入到main.js

import store from './store/index'
new Vue({
    render: h => h(App),
    store,
    router: router
}).$mount('#app')

5.使用模块化

{{$store.state.user.test}}
{{$store.getters[user/tesr]}}
this.$store.dispatch("user/saveUser", {name: "xiaohong"})

此时的数据变化可以在localStorage查看，namespaced属性为模块化准备，不加的话，就不需要加入模块前缀（比如$store.getters.tesr）