vue3.0之vuex持久化

在开发过程中，有用户信息之类的需要在vuex中存储且需要本地存储，这时候就需要vuex的持久化，也就是要安装vuex-persistedstate插件来支持vuex的状态持久化

npm i vuex-persistedstate

首先把vuex的目录改造为index.js加modules的形式 

index.js

import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
// vuex-persistedstate默认使用localstorage存储，可以在浏览器的Application里面找到存储的信息

// modules里面声明的三个模块
import cart from './modules/cart'
import user from './modules/user'
import category from './modules/category'


export default createStore({
  modules: {
    cart,
    user,
    category
  },
  // 配置安装的vuex-persistedstate插件
  plugins: [
    createPersistedState({
      // 存储名字
      key: 'ribbit-client',
      // 指定模块
      paths: ['user', 'cart']
    })
  ]
})

user.js

// 用户模块

export default {
  namespaced: true,
  state () {
    return {
      // 用户信息
      profile: {
        id: '',
        avatar: '',
        nickname: '',
        mobile: '',
        token: ''
      }
    }
  },
  mutations: {
    // 修改用户信息
    setUser (state, payload) {
      state.profile = payload;
    }
  }
}

cart.js

// 购物车模块

export default {
  namespaced: true,
  state () {
    return {
      // 商品列表
      list: []
    }
  }
}

category.js

// 分类模块

export default {
  namespaced: true,
  state () {
    return {
      list: []
    }
  }
}

App.js

<template>
  <div class="App">
    App: {{$store.state.user.profile.account}}
    <button @click="$store.commit('user/setUser', {account: 'pasco'})">点我设置用户信息</button>
  </div>
</template>
<script>
export default {
  name: 'App',
}
</script>

<style lang="less">
</style>

最简单的一个demo