Vuex的使用及map方法

Vuex

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

• 使用场景：多个组件需要共享数据

• 搭建Vuex环境

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

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

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

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

• 具体使用

  • 组件使用

    methods: {
      add() {
        this.$store.dispatch("add", params);
      },
      ...
    }
    

  • src/store/index.js配置

    // 准备actions--用于响应组件的动作
    const actions = {
      add(context, value) {
        context.commiit("ADD", value);
      },
      ...
    }
    // 准备mutations--用于操作数据（state）
    const mutations = {
      ADD(state, value) {
        state.sum += value;
      },
      ...
    }
    // 准备state--用于存储数据
    const state = {
      sum: 0,
      ...
    }
    

getters的使用

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

• 在store/index.js中追加getters配置

  ...
  // 准备getters--用于将state中的数据进行加工
  const getters = {
    change(state){
      return state.sum*10
    },
  }
  
  const store = new Vuex.Store({
    ...
    getters,
  })
  

• 组件中读取数据

  $store.getters.change
  

组件中四个map方法的使用

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

  computed: {
    // 通过mapState生成以上计算属性从state中读取数据（对象方式）
    ...mapState({sum2:'sum'}),
    // 通过mapState生成以上计算属性从state中读取数据（数组方式）,要求计算属性名称和state中读取的属性名一致
    ...mapState(['sum']),
  }
  

• mapGetters方法：用于帮助我们映射getters中的数据为自定义方法

  methods: {
    // 通过mapGetters生成以上自定义方法从getters中读取数据（对象方式）
    ...mapGetters({change:'change'}),
    // 通过mapGetters生成以上自定义方法从getters中读取数据（数组方式）,要求自定义方法和getters中读取的方法名称一致
    ...mapGetters([change]),
  }
  

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

  methods: {
    // 通过maActions生成incrementOdd，incrementWait（对象方式）：如果需要传递参数，则在点击调用时传递参数即可采用以下方式
    ...mapActions({incrementOdd: 'addOdd', incrementWait: 'addWait'}),
    // 通过mapActions生成incrementOdd，incrementWait（数组方式）：如果需要传递参数，则在点击调用时传递参数即可采用以下方式，
    // 要求计算属性名称和actions方法名一致
    // ...mapActions(['addOdd', 'addWait']),
  }
  

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

  methods: {
    // 通过mapMutations生成increment，decrement（对象方式）：如果需要传递参数，则在点击调用时传递参数即可采用以下方式
    ...mapMutations({increment: 'ADD', decrement: 'SUB'}),
    // 通过mapMutations生成increment，decrement（数组方式）：如果需要传递参数，则在点击调用时传递参数即可采用以下方式，
    // 要求计算属性名称和mutations方法名一致
    // ...mapMutations(['ADD', 'SUB']),
  }
  

模块化+命名空间

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

• 修改store.js

  const CountOptions {
    // 命名空间为true，组件即可使用该配置
    namespaced: true,
    actions: {...},
    mutations: {...},
    state: {...},
    getters: {...},
  }
  const PersonOptions {
    // 命名空间为true，组件即可使用该配置
    namespaced: true,
    actions: {...},
    mutations: {...},
    state: {...},
    getters: {...},
  }
  const store = new Vuex.Store({
    modules: {
      // 模块化编程，引入模块配置（组件配置）
      CountAbout: CountOptions,
      PersonAbout: PersonOptions,
    }
  })    
  

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

  // 方式一：自己直接读取
  this.$store.state.PersonAbout.xxx;
  // 方式二：借助mapState读取
  ...mapState('CountAbout',{sum:'sum', sum2:'sum'});
  

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

  // 方式一：自己直接读取
  this.$store.getters['PersonAbout/xxx'];
  // 方式二：借助mapGetters读取
  ...mapGetters('CountAbout',{xxx:'xxx'});
  

• 开启命名空间后，组件中调用dispatch：

  // 方式一：自己直接调用dispatch
  this.$store.dispatch('CountAbout/xxx', params);
  // 方式二：借助mapActions读取
  ...mapActions('CountAbout',{xxx:'xxx'});
  

• 开启命名空间后，组件中调用commit：

  // 方式一：自己直接调用commit
  this.$store.commit('CountAbout/xxx', params);
  // 方式二：借助mapMutations读取
  ...mapMutations('CountAbout',{xxx:'xxx'});