🍳本文参考官网加上个人理解，如有不对欢迎指正！
1. 概述
官方解释：Vuex是一个专为Vue.js应用程序开发的状态管理模式
它采用 集中式存储管理 应用的所有组件状态，并以相应的规则保证状态以一种可预测的方式发生变化。
官网：https://vuex.vuejs.org/zh/
个人理解：Vuex就是一个公共仓库，里面存储了多个组件可以共享的响应式变量。
2. 响应数据流
在单页面数据流图解如下
1.state：状态。可以当作用到的属性。
2.view：视图，用来显示state里属性的信息。
3.actions：在视图上绑定的事件，用来改变state里属性的值
循环路径： 就是 将state里的属性值放到view视图上显示，对视图进行点击或其他事件操作改变state属性值，然后又重新渲染到view上。就是这样一个循环。
缺点： 由于这是针对单个组件页面的，所以改变属性值很简单，但是如果多个组件页面用的是这同一个属性值，那么你这时发生改变了当然需要去通知其他也用到这个属性的页面，如果这样的依赖页面一多就会很复杂了，因为通过组件传值传来传去会显得很繁琐且不容易维护。
官方提供的vuex数据流图解
1.Vue Components：Vue组件
以下三个为vuex的内容
2.State：属性状态
3.mutations：更改State属性的状态的唯一方法
4.Actions：执行异步处理的方法
5.Backend API：后端接口。与后端进行数据交互
6.Devtools：官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
循环路径： Vue 组件获取State里的属性并显示，然后在组件上进行事件操作，事件操作分发(dispatch)给Actions进行处理，Actions再提交(commit)给mutations进行更改State状态，状态更新再重新渲染显示。
感觉好像有点繁琐，其实如果事件操作不包含异步操作的话可以直接提交给mutations进行更改状态，但存在异步操作的话一定要进行actions操作，不然devtools工具无法跟踪操作后数据。
所以图可以看成以下亚子
3. 基本使用
3.1 安装与初体验
安装
因为运行时时刻要用，所以安装运行版
npm install vuex --save
简单使用
和使用路由类似
1.导入vuex
2.vue使用vuex
3.创建vuex里store实例
4.export default暴露
import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store(
state: {
message:'hello'
},
mutations: {
},
actions: {
},
getters: {
}
modules: {
}
)
export default store;
5.入口文件main.js引用
import store from './store'
new Vue({
el: '#app',
store,
render: h => h(App)
})
这样整个vuex基本框架就搭好了，让我们简单的使用下state里的message属性
在组件中引用
<div id='app'>{
{
$store.state.message }}</div>
这样就引用成功了
3.2 vuex核心概念
vuex有几个核心的概念。
如上：state、mutations、actions、getters、module。一一进行简单介绍
state：单一状态树
就是将属性全部集中放在这里进行管理，方便进行维护和管理
getters：
这个没找到具体叫啥，它就类似于data里的computed计算属性，也就是说他本质也是属性，用来对数据进行某种转换过滤然后返回。
moutation：状态更新
这是对状态进行修改的唯一路径，不管是异步操作还是同步操作。
由图解也可知，它需要用到commit方法进行修改状态
它由事件类型+回调函数组成
如：
increment(state, payload) {
state.count++;
console.log(payload);
},
组件中进行提交的语法：
$store.commit(事件类型，参数)
一般提交负荷是个对象，这样写
this.$store.commit({
type: "increment",
age: 20,
say: "hello",
});
type：事件类型
整个对象包括type、age、say就是提交负荷
响应规则：
在vue中进行数据响应的前提是需要将数据初始化，所以我们将需要响应的数据提前在store中初始化。
也可以通过vue内置方法Vue.set将新属性添加到响应块，如
Vue.set(obj, 'newProp', 123)
必须是同步：
原因就是每次进行moutation操作时，devtools它都需要捕捉这个过程前后状态，但是异步操作的回调函数存在返回时间的不确定性，devtools无法识别，因此等同于它无法跟踪这个异步操作，也就不能方便我们跟踪。
action：
不直接改变状态，而是提交给moutation
可以包含任何异步操作，我们一般用来与后端进行数据交互。
actions: {
increment (context) {
context.commit('increment')
}
}
可以通过解构进行简化
actions: {
increment ({
commit }) {
commit('increment')
}
}
组件中分发给action：
store.dispatch('increment')
module：模块
如果数据量很大，为了缓解数据堆积的问题
在vuex中可以使用子模块，它们里面同样包含了以上核心概念
const moduleA = {
state: {
... },
mutations: {
... },
actions: {
... },
getters: {
... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
}
})
转载：https://blog.csdn.net/qq_43522998/article/details/116211077