Vuex的使用及map方法

  • A+
所属分类:Web前端
摘要

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


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