Nuxtjs 中使用store管理数据,并实现持久化存储

一、数据存储:store 文件夹下的目录结构#

Nuxtjs 中使用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 文件上;#

Nuxtjs 中使用store管理数据,并实现持久化存储

  • 代码:{src: ‘@/plugins/localStorage’, ssr: false},

  • 这样设置后重启项目就实现了数据持久化;

本作品采用《CC 协议》,转载必须注明作者和本文链接