vuex持久化加模块化

new-view-hairui

已于 2023-02-22 14:10:07 修改

阅读量243

点赞数 1

分类专栏： vue 文章标签：前端 javascript npm

于 2023-02-22 11:25:52 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45208029/article/details/129158929

版权

vue 专栏收录该内容

4 篇文章

订阅专栏

文章介绍了在Vue.js项目中，通过Vuex和vuex-persistedstate插件来实现应用程序状态的持久化存储，特别是在用户关闭和重新打开浏览器时仍能保留数据。配置包括安装插件、设置Vuexstore、模块化处理以及在main.js中的应用。此外，还强调了namespaced属性在模块化中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载持久化插件

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）