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

 
 
 
 
 

有关vuex的问题的更多相关文章

  1. 关于Vue.js 2.0 的 Vuex 2.0,你需要更新的知识库

    应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...

  2. vuex复习方案

    这次复习vuex,发现官方vuex2.0的文档写得太简略了,有些看不懂了.然后看了看1.0的文档,感觉很不错.那以后需要复习的话,还是先看1.0的文档吧.

  3. vuex 初体验

    vuex是vue的状态管理工具,vue进阶从es6和npm开始,es6推荐阮一峰大神的教程. vuex学习从官方文档和一个记忆小游戏开始.本着兴趣为先的原则,我先去试玩了一把-->. Vuex ...

  4. vuex(1.0版本写法)

    Vuex 是一个专门为 Vue.js 应用所设计的集中式状态管理架构. 官方文档:http://vuex.vuejs.org/zh-cn/  2.0和1.0都能在此找到 每一个 Vuex 应用的核心就 ...

  5. 关于Vue vuex vux 文档

    01. vue 链接 http://vuejs.org.cn/guide/ 02. vuex  ----->>状态管理模块儿<<------- https://vuex.vue ...

  6. vuex

    英文:(Introduction)中文:https://github.com/vuejs/vuex/issues/176(贡献者努力中)

  7. Vue 2.0 + Vue Router + Vuex

    用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...

  8. Vue2.X的状态管理vuex记录

    记住上述的顺序情况:想要改变state,只能通过Mutation,虽然action可以直接改变state,这样会使每个状态可以方便的跟踪和记录(用Devtools跟踪) vue Method   -- ...

  9. 在vue1.0遇到vuex和v-model的坑

    事情是这样的,在开发项目的过程中我使用了vuex并且在store中定义了一个保存用户信息的对象 userInfo : { 'nickName' : '', // 昵称 'password' :'', ...

  10. vuex 笔记

    Vuex 笔记 一个简单的状态管理 单一数据源: const sourceOfTruth = {} const vmA = new Vue({ data: sourceOfTruth }) const ...

随机推荐

  1. Python Django 之 静态文件存放设置

    一.静态文件存放路径设置STATICFILES_DIRS 1.在django项目目录下面新建静态文件保存目录 2.在setting中添加相应寻找静态文件目录的配置 STATICFILES_DIRS=( ...

  2. javascript进阶笔记(1)

    学习js已经有一段时间了,大大小小还是能够做出一些东西来.不过觉得可惜的是,还是对js本身这门语言不是很熟悉,总有一点雾里看花的感觉,看得见,但是看不清楚.最近发现有一本关于js的叫做<忍者秘籍 ...

  3. SQL-13 从titles表获取按照title进行分组,每组个数大于等于2,给出title以及对应的数目t。

    题目描述 从titles表获取按照title进行分组,每组个数大于等于2,给出title以及对应的数目t.CREATE TABLE IF NOT EXISTS "titles" ( ...

  4. 201621123001 《Java程序设计》第14周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结与数据库相关内容. Mysql数据库简单操作,常用的操作命令 启动:进入Mysql (从命令行mysql -u root -p) 退 ...

  5. python文件和文件流操作

    f = open(r'C:\Users\wangxue2\Desktop\somefile.txt', 'w') #r'C:\Users\wangxue2\Desktop\somefile.txt'中 ...

  6. 解决MySQL不允许远程连接的问题

    进入MySQL:mysql  -u  root  -p mysql> GRANT ALL privileges ON *.* TO 'root' @'localhost' IDENTIFIED ...

  7. IE9中input事件与异步事件连用会发生跨域问题

    IE版本中IE8以及IE9以上版本不会存在这个问题唯独IE9 发生跨域问题代码 $("#stock_code").bind("input",function(e ...

  8. python 模块基础 和常用的模块

    模块的定义 一个模块就是以.py结尾的python 文件,用来从逻辑上组织python代码.注意,模块名和变量名一样开头不能用数字,可以是双下划线和字母. 为什么要用模块? 将一些复杂的需要重复使用的 ...

  9. socket 聊天室实现

    server #include <stdio.h> #include <sys/types.h> /* See NOTES */ #include <sys/socket ...

  10. Spring Boot 揭秘与实战(九) 应用监控篇 - HTTP 健康监控

    文章目录 1. 内置 HealthIndicator 监控检测 2. 自定义 HealthIndicator 监控检测 3. 源代码 Health 信息是从 ApplicationContext 中所 ...