Vuex

1.Vuex是什么

Vuex是Vue中实现集中式状态(数据)管理的一个Vue插件,对Vue中多个组件的共享数据进行集中式管理(读/写),也是一种组件间通信方式,且适用于任何组件间通信

2.什么时候用Vuex

1.多个组件依赖于同一状态

2.来自不同组件的行为需要变更同一状态

3.搭建Vuex开发环境(store文件夹名字一定不能大写,不然会在Vue的的实例对象上面找不到)

1.创建src/store/index.js

// 改文件用于创建Vuex中最为核心的store
​
import Vue from "vue";
// 引入Vuex
import Vuex from "vuex";
// 使用Vuex插件
Vue.use(Vuex);
​
// 准备actions---用于响应组件中的动作
const actions = {};
​
// 准备mutations---用于操作数据
const mutations = {};
​
// 准备store---用于存储数据
const state = {};
​
// 创建store,并导出store
export default new Vuex.Store({ state, actions, mutations });
​

2.在main.js中创建vm是传入store配置项

import Vue from "vue";
import App from "./App.vue";
import store from "./store";    //store文件夹名字一定不能大写
// 引入插件
import vueResource from "vue-resource";
​
Vue.config.productionTip = false; //关闭Vue的生产提示
​
// 使用插件
Vue.use(vueResource); //一个发送请求的库,和axios差不多
​
new Vue({
  render: (h) => h(App),
  store,    //传入store
  beforeCreate() {
    Vue.prototype.$bus = this; //配置全局事件总线
  },
}).$mount("#app");
​

4.基本使用

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被调用了',miniStore,value)
        context.commit('JIA',value)
    },
}
​
const mutations = {
    //执行加
    JIA(state,value){
        // console.log('mutations中的JIA被调用了',state,value)
        state.sum += value
    }
}
​
//初始化数据
const state = {
   sum:0
}
​
//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
})

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

2. 组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据) 或 $store.commit('mutations中的方法名',数据)

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

5.getters的使用

1.概念:当state中的数据需要进行加工后再使用时,可以使用getters加工

2.在store/index.js中进行配置

... ...
const getters = {
    bigSum(state){
        return state.sum *10    //相当于Vue中的computed计算属性,必须写return返回值
    }
}
​
// 创建并暴露store
export default new Vue.Store({
    ... ...
    getters
})

3.组建中读取数据:$store.getters.bigSum

6.四个map方法的使用

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

computed(){
    // 利用...展开运算符把mapState对象里面生成的属性放入到computed计算属性里面,mapState里面需要传入一个对象,其中对象每一项都是一组key,value,其中key是我们要生成的计算属性名,可以随便写,也可以带引号也可以使用简写不带引号,但是value是Vuex的state里面必须存在的属性,不能乱写,而且属性名必须带引号,不然会被识别成变量
  // 使用mapState辅助函数生成计算属性,从state里面的读取数据---(对象写法)
  ...mapState({ sum: "sum", school: "school", subject: "subject" }),
  // 数组写法:意思是生成的计算属性名是sum,而且你要去Vuex的state里面读取的属性名也是sum,必须加引号
  ...mapState(["sum", "school", "subject"]),
}

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

computed(){
    
 // 使用mapGetters辅助函数生成计算属性,从getters里面的读取数据(对象写法)
 ...mapGetters({ bigSum: "bigSum" }),
 // 使用mapGetters辅助函数生成计算属性,从getters里面的读取数据(数组写法)
 ...mapGetters(["bigSum"]),
}

3.mapActios方法:用于帮助我们生成与actions对话的方法,即:包含:this.$store.dispatch(xxx)的函数

methods:{
    // 借助mapActions辅助函数去生成对应的方法(对象写法),前面是需要生成的方法名,后面是actions里定义的方法名
    ...mapActions({ incrementOdd: "incrementOdd",incrementWait: "incrementWait",}),
​
    // 借助mapActions辅助函数去生成对应的方法(数组写法),方法名必须和actions里保持一致,列如incrementOdd
    ...mapActions(["incrementOdd", "incrementWait"]),
}

4.mapMutations方法:用于帮助我们生成与mutations对话的方法,即:包含:this.$store.commit(xxx)的函数

methods:{
   
    // 借助mapMuattions辅助函数去生成对应的方法,方法中会调用commit去联系mutations(对象写法)
    ...mapMutations({ increment: "INCREMENT", decrement: "DECREMENT" }),
    // 借助mapMuattions辅助函数去生成对应的方法,方法中会调用commit去联系mutations(数组写法)
    // 方法名必须和mutations里的方法名一致
    ...mapMutations(["INCREMENT", "DECREMENT"]),
}

备注:mapAactions和mapMutations使用时,若需要传递参数,在模板中绑定事件的时候传递好参数,否则参数是事件对象

7.模块化+命名空间

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: { ... }
   }
   ​
   const store = new Vuex.Store({
     modules: {
       countAbout,
       personAbout
     }
   })

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

   //方式一：自己直接读取
   this.$store.state.personAbout.list
   //方式二：借助mapState读取：
   ...mapState('countAbout',['sum','school','subject']),

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

   //方式一：自己直接读取
   this.$store.getters['personAbout/firstPersonName']
   //方式二：借助mapGetters读取：
   ...mapGetters('countAbout',['bigSum'])

5. 开启命名空间后，组件中调用dispatch

   //方式一：自己直接dispatch
   this.$store.dispatch('personAbout/addPersonWang',person)
   //方式二：借助mapActions：
   ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

6. 开启命名空间后，组件中调用commit

   //方式一：自己直接commit
   this.$store.commit('personAbout/ADD_PERSON',person)
   //方式二：借助mapMutations：
   ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),