第一、看明白这张图在说话

  

  简单解释一下,actions接收到components的行为后actions请求api 等获取数据,提交到mutations,然后mutations中才改变state ,反映到视图中。进而完成状态的管理。简单吧。

第二、另外两个核心内容

getter (当状态在多个component中都在进行相同的处理的时候使用),

module(把store 分割成模块,每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块,解决store对象臃肿的问题)

第三、state的获取方式

  • 通过状态直接获取(不建议使用)

   computed: { msg() { return this.$store.state.msg } }

  • 通过属性访问(getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的。)

  computed: { msg() { return this.$store.getters.msg} }

  • 通过方法访问(getter 在通过方法访问时,每次都会去进行调用,而不会缓存结果)

  store.getters.getMsg(“合理使用参数”)

  • mapGetters辅助函数访问(mapGetters仅仅是将 store 中的 getter 映射到局部计算属性:)

  computed: {...mapGetters([ 'msg'... ]) }

其他使用细节

  改变数据只通过Action 提交(commit)到mutation中修改state

  建议:在action中进行数据操作

  getter中做数据过滤

以下非常非常重要:

  只有在组件中需要共享的数据才使用vuex,不要什么都使用这个玩意

现在大概就这些

关于 vuex 的使用忠告的更多相关文章

  1. vuex - 项目结构目录及一些简单配置

    首先先正经的来一段官网的"忠告": vuex需要遵守的规则: 一.应用层级的状态应该集中到单个 store 对象中. 二.提交 mutation 是更改状态的唯一方法,并且这个过程 ...

  2. vue2.0 --- vuex (一)

    之前做vue项目中没有使用vuex  一直使用vue-router 组件.路由一直的转换,烦不胜烦 今天研究一下vuex vuex是什么: vuex是专门为vue.js应用程序开发的状态管理模式. 解 ...

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

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

  4. vuex复习方案

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

  5. vuex 初体验

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

  6. vuex(1.0版本写法)

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

  7. 关于Vue vuex vux 文档

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

  8. vuex

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

  9. Vue 2.0 + Vue Router + Vuex

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

随机推荐

  1. express + restful

    express http://www.expressjs.com.cn/ Express 是一个基于 Node.js 平台的极简.灵活的 web 应用开发框架,它提供一系列强大的特性,帮助你创建各种 ...

  2. 小程序 模态对话框自定义组件(modal)

    1. 概述 1.1 说明 小程序中使用wx.showModal(Object object)打开一个模态对话框,但是目前小程序所提供的modal中的内容显示比较死板,不能够完全满足工作中所遇到的功能信 ...

  3. 金三银四背后,一个 Android 程序员的面试心得

    回顾一下自己这段时间的经历,九月份的时候,公司通知了裁员,我匆匆忙忙地出去面了几家,但最终都没有拿到offer,我感觉今年的寒冬有点冷.到十二月份,公司开始第二波裁员,我决定主动拿赔偿走人.后续的面试 ...

  4. 零基础入门微信小程序开发

    注:本文来源于:<零基础入门微信小程序开发> 课程介绍 本达人课是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件.页面样式文件.Ja ...

  5. Vue父子组件之间的相互通信

    组件是Vue知识体系中最重要的一部分之一,父子组件由于作用域的不同,无法直接对对方的数据进行操作.它们之间的数据传递都是通过中间介质进行的,父组件给子组件传值是通过props属性,而子组件给父组件传值 ...

  6. C/C++中const关键字的用法及其与宏常量的比较

    1.const关键字的性质 简单来说:const关键字修饰的变量具有常属性. 即它所修饰的变量不能被修改. 2.修饰局部变量 ; ; 这两种写法是等价的,都是表示变量的值不能被改变,需要注意的是,用c ...

  7. 原子动作检测 A Better Baseline for AVA

    本文将Faster-RCNN用在了I3D的feature map上,用于视频中多人多动作的检测 challege比赛第二名的整体方法是将Faster-RCNN作用在I3Dfeature上.训练时,以标 ...

  8. SparkCore | Rdd| 广播变量和累加器

    Spark中三大数据结构:RDD:  广播变量: 分布式只读共享变量: 累加器:分布式只写共享变量: 线程和进程之间 1.RDD中的函数传递 自己定义一些RDD的操作,那么此时需要主要的是,初始化工作 ...

  9. 001 python基础实战

    报名了阿里大学的AI,一直没有学习,今天开始正式学习. 今天是第一节,Python的基础编程实战,里面包含两个示例. 一:任务实现文件的批量重命名. 1.创建一个目录 2.程序 #!/usr/bin/ ...

  10. SpringMVC-2-(Controller)

    一)参数类型 @RequestMapping("hello4") @ResponseBody public ModelAndView Hello4( // Servlet的三个参数 ...