1. Vuex是什么

概念：专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信

2. 什么时候使用Vuex

多个组件依赖于同一状态
来自不同组件的行为需要变更同一状态

3. vuex 的工作原理

4. vuex环境搭建

1. 下载 Vuex：npm i vuex

2. 创建src/store/index.js：

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)//准备actions对象——响应组件中用户的动作、处理业务逻辑
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}//创建并暴露store
export default new Vuex.Store({actions,mutations,state
})

3. 在src/main.js中创建 vm 时传入store配置项：

import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'
import store from './store'Vue.config.productionTip = falseVue.use(Vuex)new Vue({el:"#app",render: h => h(App),store
})

5. vuex的使用

1. 初始化数据state，配置actions、mutations，操作文件store.js

2. 组件中读取vuex中的数据：$store.state.sum

3. 组件中修改vuex中的数据：$store.dispatch(‘action中的方法名’,数据) 或 $store.commit(‘mutations中的方法名’,数据)

备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit

src/components/Count.vue:

src/store/index.js:

//该文件用于创建vuex最核心的store// 引入Vuex
import Vuex from 'vuex';
import Vue from 'vue';
import vueResource from 'vue-resource';Vue.use(Vuex)
Vue.use(vueResource)//准备 actions 用于响应组件中的动作
const actions = {
/* 	jia(context,value){window.console.log('actions中的jia被调用了')context.commit('JIA',value)},jian(context,value){window.console.log('actions中的jian被调用了')context.commit('JIAN',value)}, */incrementOdd(context,value){window.console.log('actions中的incrementOdd被调用了')if(context.state.sum % 2){context.commit('JIA',value)}},incrementWait(context,value){window.console.log('actions中的incrementWait被调用了')setTimeout(()=>{context.commit('JIA',value)},500)}
}
//准备 mutations 用于操作数据
const mutations = {JIA(state,value){state.sum+=value;},JIAN(state,value){state.sum-=value;}
}
//准备 state 用于存储数据
const state = {sum:0
}//创建并暴露store
export default new Vuex.Store({actions,mutations,state,
})