vuex及其辅助函数

一、vuex的作用

  非父子关系的相互通讯

二、vuex是什么

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

三、vuex的五个要素

1)、state

统一定义公共数据(类似于data)

state: { count : ' ' }

2)、mutations

作用：修改公共数据
定义格式:

mutations: { 方法名称(state,参数(就是在执行函数时要传入的数据)){ } }

  mutations: {
    addToCart (state, goods) {
      state.goods = goods
    }
  }

 使用格式`: 👇  

this.$store.commit('mutations的名字',参数)

注意:参数只能有一个,如果希望传递复杂数据要传递对象

3)、getters

   从现有的state中派生出新的数据项(类似于compoted)
   定义格式：

getters:{ getters的名字:function(stats){ return 要返回的值 } }

getters:{
      doubleCount(state){
          return state.count * 2;
      }
 }

 使用格式: 👇

this.$store.getters.getters的方法名称

4)、actions

  发送异步请求
  定义格式:

actions: {

action的名字: function(context, 可写参数) {

// 1. 发异步请求, 请求数据

// 2. commit调用mutation来修改/保存数据

context.commit('mutation名', 载荷)

} }

actions:{//异步
      asyncAdd(content，data){
          setTimeout(()=>{
              content.commit('add',data)
          },2000)
      }
}

 注意：context对象会自动传入，它与store示例具有相同的方法和context对象

 使用格式： 👇

this.$store.dispatch('actions的名字', 参数)

 action一般用来发异步请求，数据回来之后，在去调用mutations来保存数据    

5)、modules

作用:拆分复杂业务(拆分模板)

 // 定义格式
export default ({
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {
  		模块名1： {
    		// 这个为true，则在使用mutations时，就必须要加上模块名
            namespaced: true, 
            state: {},
            getters: {},
            mutations: {},
            actions: {},
            modules: {}
         }，
        List： {
            state: {},
            getters: {},
            mutations: {},
            actions: {},
            modules: {}
        }  
    }
})

调用格式：{{$store.state.模块名.数据项名}}

注意：
1.当namespaced的值为true,则在使用的时候必须要加上模块名(一般都是为ture)    

$store.commit('模块名/mutations名')

2.当namespaced的值为false,则使用的时候不需要补充模块名

$store.commit('mutations名')

四、vuex-辅助函数map

当某个数据嵌套太深了(.的名字长),可以使用map辅助函数

首先要引入 import { mapState, mapMutations, mapActions, mapGetters } from ‘vuex’;

1)、mapState

直接使用：this.$store.state.xxx
全局使用
map辅助函数：

computed:{ ...mapState(['xxx']) ...mapState({'新名字':'xxx'}) }

使用modules中的state
直接使用：this.$store.state.模块名.xxx
map辅助函数：

computed:{ ...mapState('模块名',['xxx']) ...mapState('模块名',{'新名字':'xxx'}) }

2)、mapGetters

直接使用：this.$store.getters.xxx
全局使用
map辅助函数：

computed:{ ...mapGetters(['xxx']) ...mapGetters({'新名字':'xxx'}) }

使用modules中的getters
直接使用: this.$stort.getters.模块名.xxx
map辅助函数：

computed:{ ...mapGetters('模块名',['xxx']) ...mapGetters('模块名',{'新名字':'xxx'}) }

3)、mapMutations

直接使用: this.$store.commit('mutations名',参数)
全局使用：
map辅助函数：

methods:{ ...mapMutations(['mutations名']) ...mapMutations({'新名字':'mutations名'}) }

使用modules中的 mutations
直接使用： this.$store.commit('模块名/mutations名',参数)
map辅助函数：

methods:{ ...mapMutations('模块名',['xxx']) ...mapMutations('模块名',{'新名字':'xxx'}) }

4)、mapActions

直接使用: this.$store.dispatch('actions名',参数)
全局使用：
map辅助函数：

methods:{ ...mapActions('mutations名') ...mapActions({'新名字':'mutations名'}) }

使用modules中 actions
直接使用: this.$store.dispatch('模块名/actions名',参数)
map辅助函数：

methods:{ ...mapActions('模块名',['xxx']) ...mapActions('模块名',{'新名字':'xxx '}) }