对模块化合作开发而言，小型应用领域的状况常常横跨数个模块。在第二层冗余的兄弟二人模块间传达状况极为麻烦事，而Vue着实没有为兄妹模块提供更多间接共享资源统计数据的形式。
如前所述那个难题，很多架构提供更多了软件系统：采用自上而下的状况管理工作器，将大部份零散的共享资源统计数据交予状况命令行看管，Vue也不值得一提。
VueX 是专门针对Vue.js 应用领域软件合作开发的状况管理工作库，选用封闭式储存来管理工作应用领域的大部份模块状况。
VueX 用作管理工作零散在Vue各模块中的数据。兄妹模块间的统计数据传达。
vuex有三个版，依次vuex3相关联vue2 ； vuex4相关联vue3
三种版加装形式：
vuex3加装：npm install vuex@3
vuex4加装：npm install vuex
官网：
https://v3.vuex.vuejs.org/zh/有关状况管理工作：
通常在繁杂应用领域上才会加进VueX ，绝非要的。
每三个VueX应用领域的核心理念都是三个store （库房）自上而下第一类，与通常的自上而下第一类相同，如前所述Vue统计数据与快照存取的特征，当store中的状况（统计数据）发生变动时，与之存取的快照也会被再次图形。
store中的状况不容许被间接修正，发生改变store中的状况的惟一途径是隐式递交（commit）mutation,这能方便快捷地追踪每三个状况的变动。
在小型繁杂应用领域中，假如难以有效率追踪到状况的变动，Sonbhadra对认知和保护标识符增添很大所苦
VueX5个关键基本概念：State、Getter、Mutation、Action、Module
下面进行演示
创建三个如前所述 Vue2 的新项目：具体创建形式详见笔记（九）
vue create vuex-demo
将刚刚创建的项目 vuex-demo 拖入 Visual Studio Code 中
vuex3加装：npm install vuex@3
在src目录下新建三个 store 文件夹，新建三个 index.js 文件，提供更多三个初始 state 第一类和一些 mutation，文件标识符如下：
import Vue from vue import Vuex from vuex Vue.use(Vuex) const store = newVuex.Store({state: { count: 0 }, mutations: { increment (state) { state.count++ } } })说明：建立了三个store（库房），默认count初始值为： 0 ；以后state 是状况是给各模块调用的。
不能间接改state的状况，如需要修正要调用 mutations 形式（该形式是用作 +1 操作）。
然后将store 导出，这样就能在main.js中采用了
export default store现在希望在模块中调用 count 的值，具体操作如下：
1.由于我们是在main.js创建Vue的，因此在main.js 中就能导入刚刚创建的 index.js
import store from ./store/index.js由于是以index.js作为文件名，也能简写省略
import store from ./store然后用Vuex 提供更多的三个从根模块向大部份子模块，以 store 选项的形式“注入”该 store 的机制：
new Vue({ render: h => h(App), store:store }).$mount(#app) 做完这些就能在任意模块中利用store第一类去取值。 2.新建三个Test.vue 模块，标识符如下： <template> <div> </div> </template> <script> export default { name:Test } </script>在根模块App.vue中进行注册
在那个Test.vue 中将 count 的值取出来。
{{ this.$store.state.count }}运行项目后，浏览器就能显示出 count 的初始值 ：“0”。那个时候Test.vue 模块就成功调用了自上而下状况值。
如何修正状况码？增加三个按钮，进行加1操作。
<button @click=“add”>+1</button>定义add形式:
methods:{ add(){ this.$store.commit(“increment”) } }再次强调，我们通过递交 mutation 的形式，而非间接发生改变 store.state.count，是因为我们想要更明确地追踪到状况的变动。
这里调用的是index.js 中 store里面的 increment 形式来进行修正操作，而不是用 this.$store.state.count = this.$store.state.count +1
在浏览器中点击 +1 按钮就能发生改变状况了
优化1：能通过设置三个形式，然后就能间接调用 {{ count }}
computed: { count () { return this.$store.state.count } },优化2：mapState 辅助函数生成计算属性
当映射的计算属性的名称与 state 的子节点名称相同时，我们也能给 mapState 传三个字符串数组。
// 在单独构建的版中辅助函数为 Vuex.mapState import{ mapState }from vuex computed: mapState([ // 映射 this.count 为 store.state.count count ])有时候我们需要从 store 中的 state 中派生出一些状况，例如对state 统计数据进行过滤并进行计数等处理。
下面进行演示，在state 中再增加三个 todos 待办事项列表。其中，吃饭已经完成；睡觉尚未完成。
todos: [ { id: 1, text: 吃饭, done: true }, { id: 2, text: .睡觉, done: false } ]假设要显示到 Test.vue 模块上,现将 todos 映射过来，然后就能采用。
现在假设只是想显示已经完成的动作，该怎样操作？
这就需要对 todos 进行过滤。在 index.js 中增加三个 getters 形式（注意：三个形式间要加逗号 “ , ”）
getters: { doneTodos: state => { return state.todos.filter(todo => todo.done) } }然后就能在Test.vue 模块中采用 mapGetters 辅助函数来映射。
由于我们原来已经采用了 mapState ，现在又要同时用另外三个形式 mapGetters 就需要对标识符进行一些修正：
computed:{ …mapState([ count,todos ]), …mapGetters([ doneTodos ]) },这时浏览器就过滤出 done 状况为 true 的统计数据
下面的Mutation、Action、Module 后面的实例讲解上才能更好认知，在此仅作为了解。
Mutation更改 Vuex 的 store 中的状况的惟一形式是递交 mutation。
模块中递交 Mutation的形式，标识符如下。不再此进行演示，有兴趣能自己试一下。
import { mapMutations } from vuex export default { // … methods: { …mapMutations([ increment, // 将 `this.increment()` 映射为 `this.$store.commit(increment)` // `mapMutations` 也支持载荷： incrementBy // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit(incrementBy, amount)` ]), …mapMutations({ add:increment // 将 `this.add()` 映射为 `this.$store.commit(increment)` }) }}Action在 mutation 中处理混合异步调用时就要加进Action 。（在 Vuex 中，mutation 都是同步事务：）
先注册三个简单的 action：
const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit(increment) } }})在模块中分发 Action ，与前面类似：methods 中采用 mapActions
import { mapActions } from vuex export default { // … methods: { …mapActions([ increment, // 将 `this.increment()` 映射为 `this.$store.dispatch(increment)` // `mapActions` 也支持载荷： incrementBy // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch(incrementBy, amount)` ]), …mapActions({ add: increment // 将 `this.add()` 映射为 `this.$store.dispatch(increment)` }) }} Modules由于采用单一状况树，应用领域的大部份状况会集中到三个比较大的第一类。当应用领域变得非常繁杂时，store 第一类就有可能变得相当臃肿。
为了解决以上难题，Vuex 容许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是冗余子模块——从上至下进行同样形式的分割。
const moduleA = { state: () => ({ … }), mutations: { … }, actions: { … }, getters: { … }} const moduleB = { state: () => ({ … }), mutations: { … }, actions: { … }} const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB }}) store.state.a // -> moduleA 的状况 store.state.b // -> moduleB 的状况最终大部份模块都要和到一起。当我们创建 Vuex.Store 时，通过 modules 参数给模块起名字，比如：给 moduleA 取名为 a 。
需要访问的模块的时候就加上 a 。store.state.a // -> moduleA 的状况。
其实是对模块进行分割管理工作，比如：用户模块的状况，订单模块的状况等依次设置。
上述仅为 Vuex 的基本基本概念，具体使加进后面的综合案例再具体演示。
