vuex持久化插件使用

目的

讓在vuex中管理的狀態數據同時存儲在本地。可免去自己存儲的環節。

應用場景

• 在開發的過程中，像用戶信息（名字，頭像，token）需要vuex中存儲且需要本地存儲。
• 再例如，購物車如果需要未登錄狀態下也支持，如果管理在vuex中頁需要存儲在本地。

步驟

• 首先：我們需要安裝一個vuex的插件vuex-persistedstate來支持vuex的狀態持久化。

npm i vuex-persistedstate

• 假設 modules 下有 user.js 和 cart.js文件需要持久化

• 然后在src/store/index.js中配置下：

import { createStore } from 'vuex'
import createPersistedstate from 'vuex-persistedstate'

import user from './modules/user'
import cart from './modules/cart'
import cart from './modules/category'

export default createStore({
  modules: {
    user,
    cart
  },
  plugins: [
    createPersistedstate({
      key: *****',
      paths: ['user', 'cart']
    })
  ]
})

注意：

===> 默認是存儲在localStorage中

===> key是存儲數據的鍵名

===> paths是存儲state中的那些數據，如果是模塊下具體的數據需要加上模塊名稱，如user.token

===> 修改state后觸發才可以看到本地存儲數據的的變化。