首先需要安装vuex-persist：
npm install vuex-persist
然后在你的store.js文件中引入：
javascript
import VuexPersistence from 'vuex-persist'
const vuexLocal = new VuexPersistence({
storage: window.localStorage // 可以换成其他存储方式，如sessionStorage、indexedDB等
})
export default new Vuex.Store({
state: {
...
},
mutations: {
...
},
actions: {
...
},
plugins: [vuexLocal.plugin] // 注册插件
})
在初始化VuexPersistence时，可以配置一些选项来满足你的需求：
javascript
const vuexLocal = new VuexPersistence({
storage: window.sessionStorage, // 存储方式，默认为localStorage
key: 'my-app', // 存储的key名，默认为vuex
reducer: state => ({ user: state.user }), // 只存储特定的state，默认为存储所有的state
filter: mutation => mutation.type === 'UPDATE_USER', // 只存储特定的mutation，默认为存储所有的mutation
modules: ['auth', 'cart'] // 存储指定的模块，默认为存储所有的模块
})
需要注意的是，如果你的state中有引用类型（如对象、数组等），需要在取出时进行深拷贝，否则会影响原有的state：
javascript
const vuexLocal = new VuexPersistence({
storage: window.localStorage,
reducer: state => ({ cart: state.cart }) // 只存储cart模块的state
})
export default new Vuex.Store({
state: {
cart: {
items: []
}
},
mutations: {
addItem(state, item) {
state.cart.items.push(item)
}
},
plugins: [vuexLocal.plugin],
getters: {
getCart(state) {
return JSON.parse(JSON.stringify(state.cart)) // 返回深拷贝的state
}
}
})
在上面的例子中，我们在getters中返回了深拷贝的state，这样在其他组件中使用getters.getCart()时就可以避免影响原有的state了。