Vuex是什么？
- 专为Vue.js应用程序开发的状态管理模式
- 集中管理所有组件的状态，
- 可以存放组件中的公有数据
- 所有组件都能获取Vuex中的数据并修改
安装Vuex
首先我们通过命令行vue init webpack webVue(可以用npm install -g vue-cli 安装vue-cli 脚手架或者用我前面说的vue-cli3脚手架创建也行)，新建一个叫webVue的新项目
安装Vuex到本地：npm install vuex --save （vue cli 3 中搭建脚手架预设时选择了“vuex”后便安装了vuex，可跳过此步）
运行项目：npm run dev
项目启动成功后，我们在项目的src文件夹下新建文件夹store，并在该文件夹下新建index.js文件，这个文件用于创建vuex实例，配置如下：
import Vue from 'vue'//引入vue
import Vuex from 'vuex'//引入vuex
//使用 vuex
Vue.use(Vuex);
// 创建vuex实例 并保存到变量store中
const store = new Vuex.Store({
})
export default store //导出store
在main.js中引入该文件，并在vue实例全局引入store对象；
main.js
开始编写Vuex业务代码
State:存储状态（变量）,驱动应用的数据源；
我们保存的数据就保存在这，可以在页面通过this.$store.state来获取我们定义的数据；
index.js
HelloWorld.vue
Getters:可以认为是 store 的计算属性
getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算,这里通过定义Vuex的Getters来获取，Getters可以用来监听state中值的变化，返回计算后的结果。
HelloWorld.vue
index.js
页面显示
Devtools工具显示
Mutations：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。
我们在HelloWorld.vue中添加两个按钮，加1跟减1
index.js
页面
可以通过第二个参数控制每次加几
每次点击添加会加2
Actions：类似于 mutation，不同在于Action 提交的是 mutation，而不是直接变更状态，可以包含任意异步操作。
简单来说二者区别就是 mutation是同步执行，专注于修改State，理论上是修改State的唯一途径；Action是异步，且不能直接操作State。
index.js
HelloWorld.vue
点击页面效果一样，这里我们依然可以传两个参数
HelloWorld.vue
index.js
辅助函数：mapState、mapGetters、mapActions
这是官方给的更简单的方法:
辅助函数
什么情况下使用Vuex?
适用于中大型的单页面应用，需要考虑如何把组件的共享状态提取出来，一亿个全局单例模式管理，不管在那个组件，都能获取状态/触发行为，解决方法如下：
①多个视图使用同一状态：
传参的放大对于多层嵌套的组件将会很繁琐，并对兄弟组件间的状态传递无能为力
②不同视图需要变更同一状态：
采用父子组建直接引用或者通过事件来变更和同步状态的多份拷贝，通常会导致无法维护的代码
Vuex跟全局对象有什么不同?
①Vuex状态存储是响应式的
当Vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会相应的得到高效更新。
②不能直接改变store中的状态
改变store中的状态的唯一途径就是显式地提交，方便我们跟踪每一个状态的变化
感谢：https://vuex.vuejs.org/zh/
https://my.oschina.net/wangnian/blog/2055631
https://baijiahao.baidu.com/s?id=1618794879569468435&wfr=spider&for=pc
https://www.cnblogs.com/chinabin1993/p/9848720.html
网友评论