vuex的工作原理是什么
简单描述一下Vuex的原理和使用方法，它解决了什么问题？
代码开发
2019-11-18
视图、操作、状态之间的关系：
数据单向流动
一个应用可以看作是由上面三部分组成: View, Actions,State,数据的流动从View = Actions = State =View 以此达到数据的单向流动.
但是项目较大的, 组件嵌套过多的时候, 多组件共享同一个State会在数据传递时出现很多问题.Vuex就是为了解决这些问题而产生的.
Vuex可以被看作项目中所有组件的数据中心,我们将所有组件中共享的State抽离出来,任何组件都可以访问和操作我们的数据中心.
Vuex原理
上图可以很好的说明Vuex的组成，一个实例化的Vuex.Store由state, mutations和actions三个属性组成:
state中保存着共享数据；
修改state中的状态只能提交mutations中的方法,且方法必须是同步的；
需要异步方法时,写在actions中, 提交mutations，由mutations修改state状态.
vue教程全套免费
一句话理解vue核心内容
为什么我感觉vue难
vue100个基础知识
uuex是什么
前端为什么要学nodejs
vuex使用，使用场景
vuex是一个专门为vue构建的状态管理工具，主要是解决多组建状态共享的问题。强调的是集中式管理（组件与组件之间的关系变成了组建跟仓库之间的关系）。
vuex的核心包括：state（存放状态）、mutations（同步的更改状态）、actions（发送异步请求拿到数据）、getters（根据之前的状态发布新的状态）、modules（模块划分）
state发布一条新的数据，在getters里面更具状态派发新的状态，actions发送异步请求获取数据，然后再mutations里面同步的更新数据
使用场景：购物车的数据共享，登入注册
vuex的原理：
vuex实现了一个单项数据流，在全局又有一个state存放数据，当组建要更改state中的数据时，必须通过Mutation进行，mutation同时提供了订阅者模式供外部插件调用获取state数据的更新。而当所有异步操作（常见于调用后台接口异步获取更新数据）或批量的同步操作需要走Action，但Action也是无法直接修改state的，还是需要通过mutation来修改state的数据。最后根据state的变化，渲染到视图上。
vuex的使用
1、src目录下面新建一个vuex的文件夹
2、vuex 文件夹里面新建一个store.js
3、安装vuex
cnpm install vuex --save
4、在刚才创建的store.js引入vue 引入vuex 并且use vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
5、定义数据
/*1.state在vuex中用于存储数据*/
var state={
count:1
}
6、定义方法 mutations里面放的是方法，方法主要用于改变state里面的数据
var mutations={
incCount(){
++state.count;
}
}
暴露
const store = new Vuex.Store({
state,
mutations,
getters
})
export default store;
组建里面的使用
1.引入 store
import store from '../vuex/store.js';
2、注册
export default{
data(){
return {
msg:'我是一个home组件',
value1: null,
}
},
store,
methods:{
incCount(){
this.$store.commit('incCount'); /*触发 state里面的数据*/
}
}
}
3、获取state里面的数据
this.$store.state.数据
4、触发 mutations 改变 state里面的数据
this.$store.commit('incCount');
getters，有点类似计算属性，改变state里面count数据的时候，会出发getters里面的方法，获取新值
var getters={
computedCount:(state)={
return state.count*2
});
页面使用：this.$store.getters.computedCount
action
action类似于mutation，不同在于，
action 提交的事mutation，而不是直接改变状态（也就是state里面的值）。
action 可以包含任意异步操作
var actions={
acctionsincCount:(context)={
context.commit('incCount');
});
页面使用：this.$store.dispatch()
28《Vue 入门教程》Vuex 简介、安装
本小节我们会介绍数据管理工具 vuex 。包括什么是 Vuex、Vuex 的安装、以及如何创建和使用 Vuex 数据仓库。
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
让我们从一个简单的 Vue 计数应用开始：
实例演示
"运行案例" 可查看在线运行效果
这个状态自管理应用包含以下几个部分：
以下是一个表示 “单向数据流” 理念的简单示意：
但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：
对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。
因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的 “视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！
通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。
Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行衡量。
如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此 —— 如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。
我们可以在官网 (vuex) 上直接下载 vuex 。 在 Vue 之后引入 vuex 会进行自动安装：
在一个模块化的打包系统中，您必须显式地通过 Vue.use() 来安装 Vuex：
当使用全局 script 标签引用 Vuex 时，不需要以上安装过程。
每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：
实例演示
"运行案例" 可查看在线运行效果
代码解释 在 JS 代码第 4-8 行，通过 new Vuex.Store ({…}) 创建数据仓库。 在 JS 代码第 12 行，我们可以通过 store.state.count 访问仓库中定义的数据。
本节，我们带大家学习了 vuex 的基本概念。主要知识点有以下几点：
vuex基础总结
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。也是一种组件间通信的方式。
上面的例子只是一个简单的组件间通信的例子，在实际项目中，组件间的通信往往比这要复杂的很多，所以说当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏
而vuex就是将所有状态集中管理起来，更加方便的实现组件间的通信，以往要实现数据的传递需要一步一步的向上传递，有了vuex，所有组件都可以向vuex中存数据，也可以取数据
多个组件共享数据或者是跨组件传递数据时
然后在组件中就可以通过this.$store访问到vuex了
state作为唯一的数据源，所有的共享数据都存放在state中，如：
vuex不允许在组件中修改state中的状态，如果想要修改state的数据，唯一的方法就是通过mutations修改，其实在组件中是可以直接修改的，但是这样通过mutations修改的方式，可以更加集中的监控所有数据的变化。
在mutations中定义一些修改state数据的方法，方法第一个参数就是state对象
（1）触发mutation的方法
这次是在组件的methods中，将mutation映射成methods的方法
（2）mutation传值（官网将传递的值称为载荷）
对于mutaion而言，方法接受的第一个参数始终是自身的state，第二个才是传递过来的参数，这个参数一般是一个对象，因为对象可以携带更多的数据。当然只有一条数据可以只传递这条数据
还可以写成一种对象的方式
mapMutations传值
（3）注意
actions和mutations类似，不同的是，actions是提交mutation修改共享数据，不是直接改变共享数据的，只有通过mutation才能修改state中的函数；actions中可以执行异步操作。actions中的每一个方法的第一个参数默认使context，是与 store 实例具有相同方法和属性的对象（context !== store对象）。而在组件中执行actions方法的方式就是：this.$store.dispatch('方法名')
比如定义一个定时器异步的使count自增
而提交mutation的方法是commit，利用解构赋值将commit结构出来，提交mutation修改state的值
有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤等，其实也可以理解为是类似vue的计算属性，函数接受一个参数state,也就是数据源，数据也是响应式的，state数据变化。getters里面的数据也会随之变化，不会修改state中的数据,第二个参数是getters，通过这个属性我们就可以访问到其他的getter了
组件中访问getters中的属性
其实和state差不多，就不多说了
下一节：vuex模块化