Vuex的使用及map方法

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

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

搭建Vuex环境

// 该文件用于创建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;

// 引入创建的store
import store from "./store"

new Vue({
  el: '#app',
  render: h=>h(App),
  // 使用store
  store,
  ...
})

具体使用

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

// 准备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,
  ...
}

概念：当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

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