vue3.x专题十二 ---- vuex持久化（自动保存到本地）

在开发的过程中，例如用户信息等需要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后触发才可以看到本地存储数据的的变化。