vuex概念与使用

1.vuex概念：

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

2.何时使用？

多个组件需要共享数据时

3.搭建vuex环境

1. 创建文件：src/store/index.js

   //引入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
   })

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

   ......
   //引入store
   import store from './store'
   ......
   ​
   //创建vm
   new Vue({
       el:'#app',
       render: h => h(App),
       store
   })

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,
   })

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

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

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

5.getters的使用

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

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

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

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

6.四个map方法的使用

//mapState:用于帮助我们映射state里面的数据
computed:{
    mapState({'自定义计算属性名'：'state的名字'})//对象写法
    mapState([]'state的名字'])//数组写法
}
//mapGetters:用于帮助我们映射getters里面的数据成计算属性
computed:{
    mapGetters({'自定义计算属性名'：'state的名字'})//对象写法
    mapGetters([]'state的名字'])//数组写法
}
methods: {//需要在方法调用的时候传入参数
      // 方法对象写法映射到mutations,
    ...mapMutations({ increment: "JIA", decrement: "JIAN" }),
    ...mapMutations(['jia'])     // 方法数组写法映射到mutations,里面自动执行了提交功能
    ...mapActions({increment: "JIA", decrement: "JIAN"}) //对象方法
    ...mapActions(["JIA",  "JIAN"])   // 方法数组写法映射到actions,里面自动执行了提交功能
}

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'}),