Nuxtjs 中使用store管理数据,并实现持久化存储
一、数据存储:store 文件夹下的目录结构#
- log.js 中的文件如下所示:
export const state = () => ({
logNode: [],
})
export const mutations = {
SET_lOGNODE: (state, data) => {
if (state.logNode.length) {
state.logNode = state.logNode.concat(data);
} else {
state.logNode = data;
}
}
}
export const actions = {
setLogNode({ commit }, data) {
commit('SET_lOGNODE', data)
}
}
- 以上目录结构和 store 存储方式实现数据持久化
1. 安装插件 yarn add vuex-persistedstate;#
2.plugins 文件夹下创建 localStorage.js,并添加如下代码:#
import createPersistedState from 'vuex-persistedstate'
export default ({ store }) => {
createPersistedState({
storage: sessionStorage
})(store)
}
3. 导入插件,挂载到 nuxt.config.js 文件上;#
代码:{src: ‘@/plugins/localStorage’, ssr: false},
这样设置后重启项目就实现了数据持久化;
本作品采用《CC 协议》,转载必须注明作者和本文链接
推荐文章: