Vuex
1.vuex作用：Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享。
2.安装Vuex npm i Vuex@版本号
备注：Vue2的Vuex版本是Vuex@3，现在vue默认版本是3所以安装的会是Vuex@4版本
3.Vuex原理
actions：用于响应组件中的动作（方法）在actions中的方法第一个参数context接收的是一个对象，对像里面有dispatch，commit，state等，可以理解为一个小型的store
//定义动作（方法）
语法：const actions={
test(context,value){ // context可以理解为一个小型的store
context.commit('TEST',value)//调用mutations中的方法来执行最终的数据操作
}
}
dispatch：用于执行在actions中的动作（方法）
语法：this.$store.dispatch('test',value)//这里调用了actions中的test动作（方法）
mutations：用于操作数据，在mutations中的方法中第一个参数接收的是state，用于读取修改数据
语法：const mutations={
//定义最终执行的操作（方法）
TEST(state,value){
state.sum=state.sum+value
}
}
commit：调用在mutations中的方法,也可以在组件中越过actions直接调用mutations中的方法直接操作数据
语法：
//在actions中的方法使用
commit('TEST',vlaue)
//在组件中直接调用
this.$store.commit('TEST',value)
state：用于存储数据并实行解析到组件上组件组件再重新解析dom把数据渲染到页面上
语法：
const state={
sum:0
}
vue组件中读取Vuex中的数据：$store.state.sum
4.Vuex基本使用
1.初始化数据、配置actions、配置mutations，操作文件store.js
//创建store
//先引入vue组件
import Vue from 'vue'
//再引入vuex插件
import Vuex from'vuex'
// 调用vuex插件
Vue.use(Vuex)
//创建actions———用于响应组件中的动作
const actions = {
jiaddo(context,value){
if(context.state.sum % 2){
context.commit('JIANDDO',value)
}
},
wait(context,value){
setTimeout(()=>{
context.commit('WAIT',value)
},500)
}
}
//创建mutations————用于操作数据
const mutations = {
JIA(state){
state.sum++
},
JIAN(state){
state.sum--
},
JIANDDO(state,value){
state.sum=state.sum+value
},
WAIT(state,value){
state.sum=state.sum+value
}
}
//创建state————用于存储数据
const state = {
sum:0
}
//new 一个store实例
export default new Vuex.Store({
actions,
mutations,
state
})
具体步骤：
1.创建一个store.js文件或者创建store/index.js
2.引入vue文件与vuex文件
```
import Vue from 'vue'
import Vuex from 'vuex'
```
3.调用vuex插件
```
Vue.use(Vuex)
```
4.创建好actions，mutations，state配置项
5.new 一个store实例并把实例暴露出去
```
//new 一个store实例
export default new Vuex.Store({
//把创建好的配置项添加进去
actions,
mutations,
state
})
```
6.在main.js文件中引入store文件并在Vue实例中配置好store
```
miport store from './store'
const vm =new Vue({
//在vm上添加store,让所有组件可访问到store
store,
render: h => h(App),
beforeCreate() {
Vue.prototype.$bus=this
}
}).$mount('#app')
```
总结：
1.组件要获取Vuex中的数据：this.$store.state.数据名
2.组件中修改Vuex中的数据通过dispatch访问到actions中的动作（方法）或者通过commit访问到mutations中的方法来修改数据
原理：组件-->dispatch-->actions-->commit-->mutations-->state-->组件
