Vuex是什么？

Vuex是一个专为Vue.js应用程序开发的状态管理模式。采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

安装Vuex

注意这里需要安装的是3.0版本，4.0版本是最新的匹配的是vue3而不是vue2

npm install vuex --save

并在main.js文件中引入，显式地通过Vue.use（）来安装Vuex

开始

stroe（仓库）：创建需要提供一个初始state对象和mutation

在src目录下新建文件夹vuex-》文件 store.js文件，并在main.js文件中引入使用类似于router

import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex)const store = new Vuex.Store({state:{count: 0,},mutations: {increment(state){state.count++}}
});
export default store

使用this.$store.state.对象名来获取状态对象，通过this.$store.commit()方法来触发状态变更

例，在view1中对store中的count进行更新

export default {
methods: {stateCountIncrement() {this.$store.commit("increment");},},
}

在 Vue 组件中获得 Vuex 状态

通过计算属性中返回某个状态。

例：在page2页面中通过计算属性显示count的状态，这样在page1中修改store中state.count的值，在page2页面中也会对应展示

/view2/index.vue

辅助函数mapState

用来在组件中把状态生成计算属性

将文件修改成/view2/index.vue

Mutations

类似于事件，修改state里的状态，需要调用相应的store.commit(''）方法

也可以传递额外的参数,increment增加n作为传递的参数

例：

permission.js文件
mutations: {increment(state,n){// state.count++state.count+=n}}///view1/index.vuemethods: {stateCountIncrement() {// this.$store.commit("increment");this.$store.commit("increment", 10);},},

一般传递的参数是对象

permission.js文件mutations: {increment(state,payload){// state.count++// state.count+=nstate.count += payload.count}}///view1/index.vuemethods: {stateCountIncrement() {// this.$store.commit("increment");// this.$store.commit("increment", 10);this.$store.commit("increment", {count: 10,});},},

在组件中提交Mutation

组件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。

///view1/index.vuemethods: {stateCountIncrement() {// this.$store.commit("increment");// this.$store.commit("increment", 10);this.$store.commit("increment", {count: 10,});},},
上下两段代码效果相同
import { mapMutations } from "vuex";
export default{methods: {...mapMutations(["increment"]),stateCountIncrement() {// this.$store.commit("increment");// this.$store.commit("increment", 10);// this.$store.commit("increment", {//   count: 10,// });this.increment({ count: 10 });},},
}

Aciton

Action和Mutation不同在于：

1.Action提交的时Mutation,而不是直接变更状态

2.Action可以包含异步操作，Mutation不行

 actions: {写法一increment(context){context.commit("increment")} 写法二，当多次使用commit的时候就会使用方法二increment({commit}){commit("increment")}}

分发(触发)Action

this.$store.dispatch("increment")
或者
import { mapActions } from 'vuex'
...mapActions(["increment"])

为什么会需要action去提交mutation，因为action不受同步执行的限制，可以在action中进行异步操作。

例，通过action触发state.count的值进行改变

store.js文件// 写法一// incrementBy(context,obj){//   setTimeout(()=>{//     context.commit("increment",obj)//   },1000)// }// 写法二incrementBy({commit},obj){// commit("increment")setTimeout(()=>{commit("increment",obj)},1000)}

//view1文件// 完成效果就是，点击按钮，触发这个函数时，1s过后state.count的值增加20stateCountIncrementAsync() {
// 写法一this.$store.dispatch("incrementBy", { count: 20 });
},

写法二
import { mapActions } from "vuex";
export default {methods: {...mapActions(["incrementBy"]),stateCountIncrementAsync() {this.incrementBy({ count: 20 });},}
}

Module

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 的状态