在开发的过程中,例如用户信息等需要vuex中存储且需要本地存储,我们可以使用一个模块,设置好后,可以在修改state后自动触发并自动到本地存储数据:
1)首先:我们需要安装一个vuex的插件vuex-persistedstate
来支持vuex的状态持久化
yarn add vuex-persistedstate(或者 npm i vuex-persistedstate)
2) 在 src/store/index.js
中导入 user 模块
import { createStore } from 'vuex'
import createPersistedstate from 'vuex-persistedstate'
import user from './modules/user'export default createStore({modules: {user},plugins: [createPersistedstate({key: 'key',paths: ['user']})]
})
注意:
===> 默认是存储在localStorage中
===> key是存储数据的键名
===> paths是存储state中的那些数据,如果是模块下具体的数据需要加上模块名称,如user.token
===> 修改state后触发才可以看到本地存储数据的的变化。