在引入mapMutations时报错,解决方法:
1:npm install --save-dev babel-plugin-transform-object-rest-spread
2:在package.json文件中引入下面两个插件(该步骤不知道有没有用到)
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-stage-2": "^6.22.0",
3:安装插件后,接着在babel的配置文件 .babelrc
中应用插件
{
"presets": [
["env", { "modules": false }]
],
"plugins": ["transform-object-rest-spread"]
}
4:重新npm install
npm run dev 就可以了
安装插件:
手动存取 localStorage 的方式还可以做得更简便。那就是引入 vuex-persist 插件,它就是为 Vuex 持久化存储而生的一个插件。不需要你手动存取 storage ,而是直接将状态保存至 cookie 或者 localStorage 中。
使用方法
安装:npm install --save vuex-persist
导入:
创建一个对象:
const vuexLocal =
storage: window
安装进vuex插件:
通过以上设置,在图3中各个页面之间跳转,如果刷新某个视图,数据并不会丢失,依然存在,并且不需要在每个 mutations 中手动存取 storage 。 vuex-persist 的详细属性-
属性 | 类型 | 描述 |
---|---|---|
key | string | 将状态存储在存储中的键。默认: 'vuex' |
storage | Storage (Web API) | 可传localStorage, sessionStorage, localforage 或者你自定义的存储对象. 接口必须要有get和set. 默认是: window.localStorage |
saveState | function (key, state[, storage]) | 如果不使用存储,这个自定义函数将保存状态保存为持久性。 |
restoreState | function (key[, storage]) => state | 如果不使用存储,这个自定义函数处理从存储中检索状态 |
reducer | function (state) => object | 将状态减少到只需要保存的值。默认情况下,保存整个状态。 |
filter | function (mutation) => boolean | 突变筛选。看mutation.type并返回true,只有那些你想坚持写被触发。所有突变的默认返回值为true |
modules | string[] | 要持久化的模块列表。 |