参考官方文档
https://vuex.vuejs.org/zh-cn/
Vuex 是什么？
官方是这么解释的：
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，
并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、
状态快照导入导出等高级调试功能。
读完了，你发现，这说的啥啊？完全没有看懂啊？
好吧！那就简单总结一句话，vuex就是处理vue中组件之间通信的
有了这个，你再也不用烦恼vue跨组件通信了。
因为Vuex里的数据都是响应式的，任何组件使用同一store的数据，
只要store的数据变化，与之对应的组件都会立即变化
安装
npm安装
npm install vuex --save
CDN
https://unpkg.com/vuex
这种方式引入的话，要放在vue.js后边
装好后怎么使用它？
首先在src目录下建立一个store文件，再这个文件夹下新建一个index.js,打开index.js
写入代码
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
})
或者
const store = new Vuex.Store({
})
export default store
在main.js引入这个文件
// index.js创建完毕然后打开main.js
import Vue from 'vue'
import App from './App'
// 引入store文件下的index.js,如果你是index.js文件
// 引入的时候可以省略index.js,若是其它文件名.js请全部引入
// 比如：import store from './store/store.js'
import store from './store'
new Vue({
el: '#app',
store, // 然后再这里使用一下
components: { App },
template: '下边介绍核心概念就4个
State
Getter
Mutation
Action
废话不多说，啥意思看官方解释，这里只说怎么用
State
state干啥的，官方解释一大堆，看完了我也觉得懵逼，这是啥啊？
其实state简单理解就是存储数据的，相当于我们的.vue文件里的data里造数据差不多
打开store文件下的index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
//这里我们创建个数组
foodlist:[
{name:'大米',price:20,count:5},
{name:'鸡腿',price:10,count:8},
{name:'沙拉',price:5,count:10},
{name:'土豆',price:13,count:2}
]
}
})
准备两个组件(名字你随意啊）
Header.vue
// 在Header.vue中拿到存在state里的数据然后渲染在页面中
// 1.直接使用$store.state.foodlist获取state里的数据(你在state里定义的是什么名字就用什么名字)
食物
价格
数量
-
{{food.name}}———{{food.price}}————{{food.count}}
Foot.vue
食物
价格
数量
-
{{food.name}}———{{food.price}}————{{food.count}}
使用了$store
两个组件的数据是不是一毛一样！这时候不同的组件就都拿到了数据
后边的3个方法就只用一个组件测试了！其它组件用法都一样的
改写header.vue
// 上边这种方法虽然也可以拿到数据，但官方推荐使用计算属性的方式获取数据
食物
价格
数量
-
{{food.name}}———{{food.price}}————{{food.count}}
Mutation
这里不先说getter,因为很好明白，state存数据，那getter看名字就知道是取数据,因为已经有$store.state可以
取到数据了，我们等会说getter，这里我们说改变数据,在组件内，来自store的数据只能读取,那我们肯定想怎么改
state里的数据,而修改store里的数据的唯一途径就是显示的提交mutation,啥意思啊！看不懂最后一句，没有关系，
我们知道你有改数据的需求的地方，只会在某一个组件内，而你不可能手动去store里改，因为state里的数据都是接口
请求下来的，那么怎么改呢，我们需要用$store.commit(),官方解释的这个方法是在组件内向store里显示提交mutation
说白了，就是在你的mutation里先定义好了一个操作state里的数据的方法，然后在你的组件里调一下你定义
-----------------------------------------------------
在mutation里那个的方法名，不过需要注意的是mutation里的方法不推荐进行异步操作，这个我们等会说
-----------------------------------
打开store的js文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
//这里我们创建个数组
foodlist:[
{name:'大米',price:20,count:5},
{name:'鸡腿',price:10,count:8},
{name:'沙拉',price:5,count:10},
{name:'土豆',price:13,count:2}
]
},
mutations:{
// 定义一个增加价格的方法
addPrice(state){
// 先遍历数组，获取到价格属性
state.foodlist.forEach(e => {
//这里得到每一个对象
//console.log(e)
e.price +=5; //每次点击+5
});
}
}
})
Header.vue文件中调用
// 准备一个点击事件(样式代码就不贴了)
食物
价格
数量
-
{{food.name}}———{{food.price}}————{{food.count}}
//按钮点击事件
有装vue-devtools插件的看的很清楚贴个图
20180502231737513.png
// 这里也是接受传参的,修改代码传个参数5
store里的js
// mutation 默认接收的第一个参数就是state
mutations:{
// 定义一个增加价格的方法
addPrice(state,num){
// 先遍历数组，获取到价格属性
state.foodlist.forEach(e => {
//这里得到每一个对象
//console.log(e)
e.price +=num; //每次点击+5
});
}
}
1.png
mutation 异步操作出现的问题
上边说过，mutation里的方法不推荐进行异步操作，那会出现什么问题，
这里我们用延时模拟个异步，我们点击按钮进行+5的操作，2秒后让页面数据改变
打开store下的js文件
// 模拟延时2秒
mutations:{
// 定义一个增加价格的方法
addPrice(state,num){
// 先遍历数组，获取到价格属性
state.foodlist.forEach(e => {
setTimeout(function(){
e.price +=num;
},2000) //延时2秒
});
}
}
这时候你在页面中点击按钮一次，过了两秒，数据改变了，当你连点时，你会发现你都不点了，数据还在页面中慢慢变化，
这显然不是我们想要的，这时候你打开控制台，你会看到方法都执行了，数据还没有变化，知道运行到最后一次执行的时
候，数据才变化完，这个时候我们就要用另一个属性了action
2.png
Action
action和muation很像，只不过不同的是action里提交的mutation，啥意思？
就是在action属性里调用的是mutation里的方法，而且只能对mutation进行操作
打开store下的js文件
// 添加action属性
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
//这里我们创建个数组
foodlist:[
{name:'大米',price:20,count:5},
{name:'鸡腿',price:10,count:8},
{name:'沙拉',price:5,count:10},
{name:'土豆',price:13,count:2}
]
},
mutations:{
// 定义一个增加价格的方法
addPrice(state,num){
// 先遍历数组，获取到价格属性
state.foodlist.forEach(e => {
//这里得到每一个对象
//console.log(e)
e.price +=num; //每次点击+5
});
}
},
actions:{
Moniyibu(context){
console.log(context)
setTimeout(function(){
context.commit('addPrice',5)
},2000)
}
}
})
header.vue中
// 在组件内触发 action 里的方法，只能通过$store.dispatch 来触发
食物
价格
数量
-
{{food.name}}———{{food.price}}————{{food.count}}