Vuex 插件
在学习购物车案例的时候,需要将购物车的信息存储到本地存储 localStorage 中,这个存储操作需要再 cart.js 的每一个 mutations 中都执行一次,所以如果 mutations 太多,这种方法就显得不是很合理,所以这里可以使用 Vuex 中的插件去实现,这样会显得更加合理一些。
- Vuex 的插件就是一个函数。
- 这个函数接收一个 store 的参数。
在这个函数里面,我们可以定义一个函数,让它在所有的 mutations 执行结束之后再去执行。
import Vue from 'vue'
import Vuex from 'vuex'
import products from './modules/products'
import cart from './modules/cart'
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]
})