vuex(store)利用插件持久化到本地储存的方法

• 使用store管理数据 (vuex)—什么是vuex?基本使用/实现过程图/什么时候使用/优势
• 在如上使用中会有一个弊端就是每次刷新数据对象会重新加载为空,这时候可以考虑使用本地储存持久化。

1. 监听vuex变化,如果数据改变就存放到本地储存
2. 如果页面刷新就从本地储存中重新取出数据

• store与本地储存的区别是本地储存由于不属于vue的一部分，没有实时更新的功能（需要刷新才重新渲染）
• nuxtjs中store不能直接使用浏览器的lcoalStorage方法，而且自己写数据同步功能比较麻烦,所以可以需要依赖一个插件vuex-persistedstate，该插件会把本地存储的数据存储到store。
• 插件地址：https://github.com/robinvdvleuten/vuex-persistedstate

一、安装插件

• npm install --save vuex-persistedstate

二、创建插件文件plugins/文件下面

需要创建一个 localStorage 自定义插件用来引入第三方包
普通vue引入第三方的插件时, 可以直接在 main.js 入口文件的 new Vue 根实例创建之前, 添加代码,nuxt 的机制是自定义插件,存放在 plugins 文件夹, 然后用配置进行引入创建插件的两步在根目录plugins中新建文件localStorage.js，加入以下代码

三、Nuxt环境下示例

console.log('开始了');
//在这个自定义插件中配置vuex-persistedstate
import createPersistedState from 'vuex-persistedstate'

//结构nuxt下的store
export default ({ store }) => {
    //如果想要等到nuxt加载完毕再执行代码,可以使用window.onNuxtReady()函数
    window.onNuxtReady(() => {

        console.log();
        createPersistedState({
            //这里表示想要将vuex数据存放到localStore里面
            // key:键名
            key: 'store',
        })(store)
    })
}

四、配置

在nuxt.config.js的plugins配置连引入插件,注意设置为false

  plugins: [
    '@/plugins/element-ui',
    // '@/plugins/localStorage'
    //这里的引入如果是普通字符串,就在服务端马上运行
    //如果是要等到浏览器再运行的代码可以将配置改为对象,并且路径作为src传递
    {
      src: '@/plugins/localStorage',
      //如果只在浏览器加载的代码,可以添加属性ssr:false
      ssr: false
    }
  ],

五、vue环境下示例

/* module.js */
export const dataStore = {
  state: {
    data: []
  }
}

/* store.js */
import { dataStore } from './module'

const dataState = createPersistedState({
  paths: ['data']
})

export new Vuex.Store({
  modules: {
    dataStore
  },
  plugins: [dataState]
})

六、最后重启项目即可