Vuex中使用本地存储

案例：购物车

在我们平时使用的网站中，对于商品选用购物车再次刷新是两种场景，第一种场景是登录状态，在我们平时登录的时候使用购物车，在这种情况下，购物车的数据是通过服务端获取的。第二种场景

如果是以游客模式没有登录的话，我们刷新购物车的时候数据就要在本地存储中进行获取。

每一次更改数据的状态是通过mutation进行更改的，所以我们在每一次mutation提交完毕后都要把状态存储到本地localStorage中

而在Vuex中为我们提供了插件来进行每一次mutation之后设置回调函数，vuex中的插件是要在Vuex Store实例化直接定义的

const myPlugin = store => {
    // 当store初始化后被调用
    store.subscribe((mutation, state) => {
    // 每次mutation之后调用
    // mutation 的格式为 { type, payload}
})
}

export default new Vuex.Store({
    state: {},
    mutations: {},
    actions: {},
    modules: {},
    plugins: [myPlugin],
})

在本地的localStorage中存储的都是字符串

案例代码段：

Vue.use(Vuex)

const myPlugin = store => {
  store.subscribe((mutation, state) => {
    if (mutation.type.startsWith('cart/')) {
      window.localStorage.setItem('cart-products', JSON.stringify(state.cart.cartProducts))
    }
  })
}

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    products,
    cart
  },
  plugins: [myPlugin]
})

const state = {
  cartProducts: JSON.parse(window.localStorage.getItem('cart-products')) || []
}