一、vuex是什么？

1. 概念：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。
2. Github 地址：https://github.com/vuejs/vuex

二、什么时候使用vuex?

1. 多个组件依赖于同一状态
2. 来自不同组件的行为需要变更同一状态
3. 多个组件需要共享数据时

三、Vuex工作原理图

1. Actions/Mutation/State都是对象
2. Vuex涉及的方法和对象归Store统一管理

四、搭建Vuex环境

1. npm i vuex@3
2. 创建文件：src/store/index.js

//该文件用于创建Vuex中最为核心的store
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
//准备actions--用于响应组件中的动作
const actions = {}
//准备mutations--用于操作数据(state)
const mutations = {}
//准备state--用于存储数据
const state = {}

//创建store
export default new Vuex.Store({
    actions,
    mutations, 
    state
})

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

import Vue from 'vue'
import App from './App.vue'
//引入store
import store from './store'
Vue.config.productionTip = false
//使用插件

const vm = new Vue({
  render: h => h(App),
  store
}).$mount('#app')

五、基本使用

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

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions——用于响应组件中的动作
const actions = {
	jia(context,value){
		console.log('actions中的jia被调用了')
		context.commit('JIA',value)
	},
}
//准备mutations——用于操作数据（state）
const mutations = {
	JIA(state,value){
		console.log('mutations中的JIA被调用了')
		state.sum += value
	},

}
//准备state——用于存储数据
const state = {
	sum:0 //当前的和
}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state,
})

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

3. 组件中修改Vuex中的数据：$store.dispatch('actions中的方法名‘，数据）或 $store.commit('mutation中的方法名’，数据）

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

v-model.number 会强制把字符串转成数字