有关vuex的问题

在引入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

导入：import VuexPersistence from 'vuex-persist'
 

创建一个对象：

const vuexLocal = new VuexPersistence({

    storage: window.localStorage

})

安装进vuex插件：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

const store = new Vuex.Store<State>({

  state: { ... },

  mutations: { ... },

  actions: { ... },

  plugins: [vuexLocal.plugin]

}) 
 

通过以上设置，在图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[]	要持久化的模块列表。

j