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