四、使用Vuex

Vuex

概念

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

何时使用？

	**多个组件需要共享数据时**

搭建vuex环境

原理图

1、安装vuex：

npm i vuex 或 npm i vuex@...
注意：

vue2中,要用vuex的3版本
vue3中，要用vuex的4版本

2、创建文件：src/store/index.js

//该文件用于创建Vuex中 最为核心的store
  
/* 
    因为Vue 解析 main.js 的时候会先解析 引入内容（import）
    而index这里面 new Store的时候 
    用到了Vuex所以需要在该文件中使用插件 所以需要引入Vue
    */
    
    //引入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、在 mian.js 中创建vm时传入 store 配置项

.....
//引入store 如果是容易认识的文件名 可以省略
//import store from "./store/index";
import store from "./store";
.....
   
   //创建vm
   const vm = new Vue({
     el: "#app",
     render: (h) => h(App),
     store: store,
     beforeCreate() {
       Vue.prototype.$bus = this; //设置全局事件总线
     },
   }); 

基本使用

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

//引入Vue
import Vue from "vue";
//引入Vuex插件
import Vuex from "vuex";
//使用vuex插件
Vue.use(Vuex);

const actions = {
   //响应组件中加的动作
  jia(context, value) {
    console.log("actions中jia被调用了", context, value);
    context.commit("JIA", value);
    /* context：操控上下文 用来提交  value：接收到的值*/
  }, 
};

const mutations = {
    //执行加
  JIA(state, value) {
    console.log("mutations中jia被调用了", state, value);
    state.sum += value;
    /* state：初始定义的state 用来操作state里的数据  value：接收到的值*/
  },
};

//初始化数据
const state = {
  sum: 0,
};

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

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

3、组件中修改vuex中的数据：$store.dispatch("actions中的方法名",数据)或$store.com,it("mutations中的方法名",数据)

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

getters的使用

1、概念：当state中的数据需要经过加工后在使用时，可以使用getters加工。

2、在store.js中追加getters配置

....
const getters = {
	dahe(state){
		return state.sum * 10；
	}
}
//创建并暴露store
export default new Vuex.Store({
	......
	getters,
})

3、组件中读取数据：$store.getters.dahe

四个map方法的使用

1、mapState方法：用于帮助我们映射 state 中的数据为计算属性

computed: {
	//借助mapState生成计算属性，从state中读取数据。（对象写法）
	// ....对象体   把对象体内的内容全部添加到当前对象中（计算属性）
	...mapState({ he: "sum", xuexiao: "school", xueke: "subject" }),

	//借助mapState生成计算属性，从state中读取数据。（数组写法）
	 ...mapState(["sum", "school", "subject"]),
}

2、mapGetters方法：用于帮助我们映射 getters 中的数据为计算属性

computed: {
	//借助mapGetters生成计算属性，从getters中读取数据。
    ...mapGetters({ dahe: "dahe" }),//(对象写法)
    ...mapGetters(["dahe"]), //(数组写法)
}

3、mapActions方法：用于帮助我们生成与 actions 对话的方法，即：包含 $store.duspatch(xxx)的函数

methods: {
	/* 借助 mapMutations 生成对应的方法，方法中会调用commit去联系 mutations
      不过这样写的话 传参的时候 需要在用到的地方直接传入 不支持在 mapMutations 内传入参数
    */
    ...mapMutations({ increment: "JIA", decrement: "JIAN" }), //对象写法
    ...mapMutations(["JIA", "JIAN"]), //数组写法 前提：方法名 跟 mutations里的方法名一致
}

4、mapMutations方法：用于帮助我们生成与 mutations 对话的方法，即：包含 $store.commit(xxxx) 的函数

methods: {
	/* 借助 mapActions 生成对应的方法，方法中会调用 dispatch 去联系 Actions 
       不过这样写的话 传参的时候 需要在用到的地方直接传入 不支持在 mapActions 内传入参数
    */
    ...mapActions({ incrementOdd: "jiaOdd", incrementWait: "jiaWait" }), //对象写法
    ...mapActions(["jiaOdd", "jiaWait"]), //数组写法 前提：方法名 Actions里的方法名一致
}

备注：mapActions与mapMutations 使用时，若需要传递参数时 需要：在模板中绑定事件时传递好参数，否则参数是时间对象

模块化+命名空间

1、目的：让代码更好维护，让多种数据分类更加明确

2、修改 store.js

const countAbout = {
    namespaced:true,	开启命名空间
    state：{x:1},
    mutations：{ ... },
    actions：{ ... },
    getters：{
        bigSum(state){
            return state.sum * 10
        }
    }
}
const personAbout = {
    namespaced:true,	开启命名空间
    state：{ ... },
    mutations：{ ... },
    actions：{ ... },
    getters：{ ... },
}  
const store = new Vuex.Store({
    模块化管理
    modules：{
        countAbout,
        personAbout
    }
})

3、开启命名空间后，组件中读取 state 数据

方法一：自己直接读取
this.$store.state.personAbout.personList;

方法二：借助mapState读取
//数组前 加入模块名命 指定对应的模块里  前提该模块里写了 namespaced:true
...mapState("countAbout", ["sum", "school", "subject"]),

4、开启命名空间后，组件中读取 getters 数据

方法一：自己直接读取
// js中 不仅可以 . 属性名  也可以[] 来选择指定属性
this.$store.getters["personAbout/firstName"];

方法二：借助 mapGetters 读取
...mapGetters("countAbout", ["bigSum"]),

5、开启命名空间后，组件中调用 mapActions 读取 actions 中的方法

方法一：自己直接调用
 this.$store.dispatch("personAbout/addPersonWang", personObj);

方法二：借助 mapActions 读取
...mapActions("countAbout", {incrementOdd: "jiaOdd",incrementWait: "jiaWait"})

6、开启命名空间后，组件中调用 commit 读取 mutations 中的方法

方法一：自己直接调用
/* 读取 mutations 里的方法需要 加入 / 进行指定模块下的方法 */
this.$store.commit("personAbout/ADD_PERSON", personObj);

方法二：借助 mapMutations 读取
 ...mapMutations("countAbout", { increment: "JIA", decrement: "JIAN" })