vuex

什么是Vuex? 　　　 　Vuex是一种 状态管理模式， 说白了Vuex就是数据管理的模式，它是管理数据的。 什么时候用Vuex？ 　　　　 多个组件需要共享同一数据，让它们保持一致。比如 购物车。 　　　　Vuex解决了一个问题：保持多个组件之间数据一致。 store: 俗称 仓库，这个仓库里面放的是 一些数据 和 对数据的操作。 state: 仓库中的数据都放在这里，很像vue中的data； 状态 数据源 都是指它， 在这里的数据就像一个全局变量 mutation: 修改state中的数据， mutation里必须是同步操作 action: 它和mutation几乎一样，在action里可以执行异步操作 getter: 获取数据，得到数据。 虽然this.$store.state.xxx可以直接获取state中的数据，但是我们经常对拿到的数据做一些处理，例如 格式化 或者 过滤数据，这时候就要用到getter了。 获取state中的数据： this.$store.state.xxx 调用mutations中的方法：this.$store.commit('xxx') 调用action中的方法： this.$store.dispatch('xxx') 获取getters中的方法： this.$store.getters.xxx 　　var store = new Vuex

前言 之前学过vue的相关知识，并且将以前所做的一个小型SPA项目使用vue重构了一遍，发现里面一个很大的问题是组件之间的传值比较麻烦。而为了巩固一下vue的基础知识，前段时间利用零碎的时间在手机上把vue的官方教程粗略了看了一遍，发现文档中对于组件间的传值描述甚少，其中最后一个状态管理一章提到使用vuex，其实之前在学习vue的时候早就知道vuex这个概念。但是一直都没有下定决心去看相关的资料，可能是之前学习react的时候，被redux搞的有点心理阴影了，因为当时好不容易花了两三天的时间把redux的官方文档看完了之后，依然不知道该如何在react项目中去使用redux，而简单的看了下vuex的简介，发现vuex和redux其实是差不多的东西。所以下意识的认为vuex肯定也很难理解，所以一直拖着没去看vuex。现在觉得呢，如果不把vuex学会的话，那vue这个框架就学习的不算完整。所以硬着头皮也要把它给啃完。看完文档之后发现其实没有想象中的那么难理解，可能是因为之前看过redux的缘故吧，vuex里面的思想跟redux是一样的，所以接受起来还算快，不是当初学习redux的那种蒙蔽状态。下面我将根据我自己的理解，按照vuex官方文档的目录结构，将vuex的基础知识重新梳理一遍，对于我自己而言，也可以加深vuex的理解。 1. vuex简介 vuex是专门用来管理vue

（1）单一状态树 Vuex 使用单一状态，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。 单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。 单状态树和模块化并不冲突——之后介绍如何将状态和状态变更事件分布到各个子模块中。 （2）入口文件状态注入 Vuex 通过 store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中（需调用 Vue.use(Vuex)），即在main.js文件中引入该文件，在文件里面添加 import store from ‘./store’;，再在vue实例全局引入store对象 通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到。 （3）mapState 辅助函数 表面意思:mapState是state的辅助函数.这么说可能很难理解 抽象形容：mapState是state的语法糖，可能你根本不了解什么叫做语法糖。事实上这里说的语法糖有自己的定义，什么是语法糖? 这里对语法糖的理解就是，用之前觉得，我明明已经对一种操作很熟，用了一段时间后,真香! 实际作用:当一个组件需要获取多个状态时候

（1）简介 每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同： Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。 （2）store仓库 . 来源： https://www.cnblogs.com/jianxian/p/11319229.html

在 Vue 的单页面应用中使用，需要使用 Vue.use(Vuex) 调用插件。 使用非常简单，只需要将其注入到Vue根实例中。 import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 }, getter: { doneTodos: (state, getters) => { return state.todos.filter(todo => todo.done) } }, mutations: { increment (state, payload) { state.count++ } }, actions: { addCount(context) { // 可以包含异步操作 // context 是一个与 store 实例具有相同方法和属性的 context 对象 } } }) // 注入到根实例 new Vue({ el: '#app', store, template: '<App/>', components: { App } }) 然后改变状态： this.$store.commit('increment') Vuex 主要有四部分： state：包含了 store 中存储的各个状态。 getter: 类似于 Vue 中的计算属性，根据其他 getter

In vuejs 2.0 model.sync will be deprecated . So, what is a proper way to communicate between sibling components in vuejs 2.0 ? As I catch the idea in Vue 2.0 is to have sibling communication by using a store or an event bus . According to evan : It's also worth mentioning "passing data between components" is generally a bad idea, because in the end the data flow becomes untrackable and very hard to debug. If a piece of data needs to be shared by multiple components, prefer global stores or Vuex . [ Link to discussion ] And: .once and .sync are deprecated. Props are now always one-way down. To