Vue —— 进阶 Vuex（一）（四个 map 的用法、模块化和命名空间）-阿里云开发者社区

一、四个 map 的用法

1. mapState 方法

用于帮助我们映射 state 中的数据为计算属性

  computed: {
    // 借助 mapState 生成计算属性：sum、school、subject (对象写法)
    ...mapState({ sum: "sum", school: "school", subject: "subject" })
    // 借助 mapState 生成计算属性：sum、school、subject (数组写法)
    ...mapState(['sum', 'school', 'subject'])
  }

2. mapGetters 方法

用于帮助我们映射 getters 中的数据为计算属性

  computed:{
    // 借助 mapGetters 生成计算属性：bigSum (对象写法)
    ...mapGetters({bigSum: bigSum})
    // 借助 mapGetters 生成计算属性：bigSum (数组写法)
    ...mapGetters(['bigSum'])
  }

实例：使用 mapState 和 mapGetters

使用 mapState 和 mapGetters，可以少些很多代码。

index.js

  // 该文件用于创建Vuex中最为核心的store
  // 引入vue核心库
  import Vue from 'vue'
  // 引入Vuex
  import Vuex from 'vuex'
  // 应用Vuex插件
  Vue.use(Vuex)
  // 准备actions——用于响应组件中的动作
  const actions = {
      addOdd(context, value){
          console.log('actions中的addOdd被调用了');
          if(context.state.sum % 2){
              context.commit('ADD',value)
          }
      },
      addWait(context, value){
          console.log('actions中的addWait被调用了');
          setTimeout(()=>{
              context.commit('ADD', value)
          },500)
      }
  }
  // 准备mutations——用于修改state中的数据（state）
  const mutations = {
      ADD(state, value){
          console.log('mutations中的ADD被调用了',state, value);
          state.sum += value
      },
      SUB(state, value){
          console.log('mutations中的SUB被调用了',state, value);
          state.sum -= value
      }
  }
  // 准备state——用于存储具体的数据
  const state = {
      sum: 0, //当前的和
      school: '尚硅谷',
      subject: '前端'
  } 
  // 准备getters——用于将state中的数据进行加工
  const getters = {
      bigSum(state){
          return state.sum * 10
      }
  }
  // 创建并暴露store
  export default new Vuex({
      actions,
      mutations,
      state,
      getters
  })

Count.vue

要在该组件导入 mapState 和 mapGetters
import { mapState, mapGetters } from "vuex";

  <template>
    <div>
      <h2>当前求和为：{{ sum }}</h2>
      <h3>当前求和放大10倍：{{ bigSum }}</h3>
      <h3>我在{{ school }}，学习{{ subject }}</h3>
      <select v-model.number="n">
        <option :value="1">1</option>
        <option :value="2">2</option>
        <option :value="3">3</option>
      </select>
      <button @click="add(n)">+</button>
      <button @click="sub(n)">-</button>
      <button @click="addOdd(n)">当前求和为奇数再加</button>
      <button @click="addWait(n)">等一等再加</button>
    </div>
  </template>
  <script>
  import { mapState, mapGetters } from "vuex";
  export default {
    name: "myCount",
    data() {
      return {
        n: 1, //用户选择的数字
      };
    },
    computed: {
      // 借助mapState生成计算属性，从state中读取数据 （对象写法）
      //...mapState({ sum: "sum", school: "school", subject: "subject" }),
      // 借助mapState生成计算属性，从state中读取数据 （数组写法）
      ...mapState(['sum','school','subject']),
      // 借助mapGetters生成计算属性，从getters中读取数据（对象写法）
      //...mapGetters({bigSum: 'bigSum'}),
      // 借助mapGetters生成计算属性，从getters中读取数据（数组写法）
      ...mapGetters(['bigSum'])
    },
    methods: {
      increment() {
        this.$store.commit("ADD", this.n);
      },
      decrement() {
        this.$store.cmommit("SUB", this.n);
      },
      incrementOdd() {
        this.$store.dispatch("addOdd", this.n);
      },
      incrementWait() {
        this.$store.dispatch("addWait", this.n);
      },
    },
  };
  </script>
  <style scoped>
  button {
    margin-left: 5px;
  }
  </style>

如果不使用 mapState 和 mapGetters，则需要在 computed 中手动配置如下代码。

  computed: {
    sum() {
      return this.$store.state.sum;
    },
    school() {
      return this.$store.state.school;
    },
    subject() {
      return this.$store.state.subject;
    },
    bigSum() {
      return this.$store.getters.bigSum;
    }
  }

3. mapActions 方法

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

  methods: {
    // 靠mapActions生成：addOdd、addWait (对象写法)
    ...mapActions({addOdd: 'addOdd', addWait: 'addWait'})
    // 靠mapActions生成：addOdd、addWait (数组写法)
    ...mapActions(['addOdd', 'addWait'])
  }

4. mapMutations 方法

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

  methods: {
      // 靠mapMutations生成：ADD、SUB (对象写法)
      ...mapMutations({add: 'ADD', sub: 'SUB'})
      // 靠mapMutations生成：ADD、SUB (数组写法)
      ...mapMutations(['ADD', 'SUB'])
  }

实例：使用 mapActions 和 mapMutations

index.js 不变

Count.vue

要在该组件导入 mapActions 和 mapMutations

import { mapActions, mapMutations} from "vuex";

  <template>
    <div>
      <h2>当前求和为：{{ sum }}</h2>
      <h3>当前求和放大10倍：{{ bigSum }}</h3>
      <h3>我在{{ school }}，学习{{ subject }}</h3>
      <select v-model.number="n">
        <option :value="1">1</option>
        <option :value="2">2</option>
        <option :value="3">3</option>
      </select>
      <button @click="add(n)">+</button>
      <button @click="sub(n)">-</button>
      <button @click="addOdd(n)">当前求和为奇数再加</button>
      <button @click="addWait(n)">等一等再加</button>
    </div>
  </template>
  <script>
  import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
  export default {
    name: "myCount",
    data() {
      return {
        n: 1, //用户选择的数字
      };
    },
    computed: {
      // 借助mapState生成计算属性，从state中读取数据 （对象写法）
      // ...mapState({ sum: "sum", school: "school", subject: "subject" }),
      // 借助mapState生成计算属性，从state中读取数据 （数组写法）
      ...mapState(["sum", "school", "subject"]),
      // 借助mapGetters生成计算属性，从getters中读取数据（对象写法）
      //...mapGetters({bigSum: 'bigSum'}),
      // 借助mapGetters生成计算属性，从getters中读取数据（数组写法）
      ...mapGetters(["bigSum"]),
    },
    methods: {
      //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations (对象的写法)
      ...mapMutations({add: 'ADD', sub: 'SUB'}),
      //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations (数组的写法)
      //...mapMutations(['ADD','SUB']), //此时上面的绑定也要 @ADD @SUB
      //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions (对象写法)
      ...mapActions({addOdd: 'addOdd', addWait: 'addWait'})
      //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions (数组写法)
      //...mapActions(['addOdd','addWait'])
    },
  };
  </script>
  <style scoped>
  button {
    margin-left: 5px;
  }
  </style>

二、多组件共享数据

基本功能

Person 组件添加一个人，Count 组件响应地加一

Count 组件加一，Person 组件响应地加一

https://www.bilibili.com/video/BV1r3411G7KS?t=15.8

多组件共享

index.js

  // 该文件用于创建Vuex中最为核心的store
  // 引入vue核心库
  import Vue from 'vue'
  // 引入Vuex
  import Vuex from 'vuex'
  // 应用Vuex插件
  Vue.use(Vuex)
  // 准备actions——用于响应组件中的动作
  const actions = {
      addOdd(context, value) {
          console.log('actions中的addOdd被调用了');
          if (context.state.sum % 2) {
              context.commit('ADD', value)
          }
      },
      addWait(context, value) {
          console.log('actions中的addWait被调用了');
          setTimeout(() => {
              context.commit('ADD', value)
          }, 500)
      }
  }
  // 准备mutations——用于修改state中的数据（state）
  const mutations = {
      ADD(state, value) {
          console.log('mutations中的ADD被调用了');
          state.sum += value
      },
      SUB(state, value) {
          console.log('mutations中的SUB被调用了');
          state.sum -= value
      },
      ADD_PERSON(state, value) {
          console.log('mutations中的ADD_PERSON被调用了');
          state.personList.unshift(value)
      }
  }
  // 准备state——用于存储具体的数据
  const state = {
      sum: 0, //当前的和
      school: '清华大学',
      subject: 'Web前端',
      personList: [{
          id: '001',
          name: '张三'
      }]
  }
  const getters = {
      bigSum() {
          return state.sum * 10
      }
  }
  // 创建并暴露store
  export default new Vuex.Store({
      actions,
      mutations,
      state,
      getters
  })

Count.vue

使用 map 写法

  <template>
    <div>
      <h2>当前求和为：{{ sum }}</h2>
      <h3>当前求和放大10倍：{{ bigSum }}</h3>
      <h3>我在{{ school }}，学习{{ subject }}</h3>
      <h3 style="color: red">Person组件的总人数是：{{ personList.length }}</h3>
      <select v-model.number="n">
        <option :value="1">1</option>
        <option :value="2">2</option>
        <option :value="3">3</option>
      </select>
      <button @click="add(n)">+</button>
      <button @click="sub(n)">-</button>
      <button @click="addOdd(n)">当前求和为奇数再加</button>
      <button @click="addWait(n)">等一等再加</button>
    </div>
  </template>
  <script>
  import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
  export default {
    name: "myCount",
    data() {
      return {
        n: 1, //用户选择的数字
      };
    },
    computed: {
      // 借助mapState生成计算属性，从state中读取数据 （对象写法）
      // ...mapState({ sum: "sum", school: "school", subject: "subject" }),
      // 借助mapState生成计算属性，从state中读取数据 （数组写法）
      ...mapState(["sum", "school", "subject", "personList"]),
      // 借助mapGetters生成计算属性，从getters中读取数据（对象写法）
      //...mapGetters({bigSum: 'bigSum'}),
      // 借助mapGetters生成计算属性，从getters中读取数据（数组写法）
      ...mapGetters(["bigSum"]),
    },
    methods: {
      //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations (对象的写法)
      ...mapMutations({ add: "ADD", sub: "SUB" }),
      //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations (数组的写法)
      // ...mapMutations(['ADD','SUB']), //此时上面的绑定也要 @ADD @SUB
      ...mapActions({ addOdd: "addOdd", addWait: "addWait" }),
      // ...mapActions(['addOdd','addWait'])
    },
  };
  </script>
  <style scoped>
  button {
    margin-left: 5px;
  }
  </style>

Person.vue

使用普通的写法

  <template>
    <div>
      <h3>人员列表</h3>
      <h3 style="color: red">Count组件的求和为：{{ sum }}</h3>
      <input type="text" placeholder="请输入名字" v-model="name" />
      <button @click="addPerson">添加</button>
      <ul>
        <li v-for="p in personList" :key="p.id">{{ p.name }}</li>
      </ul>
    </div>
  </template>
  <script>
  import { nanoid } from "nanoid";
  export default {
    name: "myPerson",
    data() {
      return {
        name: "",
      };
    },
    computed: {
      personList() {
        return this.$store.state.personList;
      },
      sum() {
        return this.$store.state.sum;
      },
    },
    methods: {
      addPerson() {
        const personObj = { id: nanoid(), name: this.name };
        this.$store.commit("ADD_PERSON", personObj);
        this.name = "";
      },
    },
  };
  </script>

三、模块化（module）和命名空间（namespace）

1. 目的

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

2. 修改 .store/xxx.js 文件

index.js

使用模块化编程

导入 count.js 和 person.js 文件

在 modules 中配置 countOptions 和 personAbout

  // 引入vue核心库
  import Vue from 'vue'
  // 引入Vuex
  import Vuex from 'vuex'
  import countOptions from './count'
  import personOptions from './person'
  // 应用Vuex插件
  Vue.use(Vuex)
  // 创建并暴露store
  export default new Vuex.Store({
      modules: {
          countAbout: countOptions,
          personAbout: personOptions
      }
  })

count.js

此文件内容为求和相关的配置
注意开启命名空间，用于解决不同模块的命名冲突问题。

  const countAbout = {
      namespaced: true, //开启命名空间
      actions: {...},
      mutations: {...},
      state: {...},
      getters: {
          xxx(state){
              return state.x
          }
      }
  }

person.js

此文件内容为人员信息相关的配置
注意开启命名空间，用于解决不同模块的命名冲突问题。

  const personAbout = {
      namespaced: true, //开启命名空间
      actions: {},
      mutations: {},
      state: {},
      getters: {}
  }

3. 组件中读取 state 数据

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

  //方式一：自己读取数据
  this.$store.state.personAbout.personlist
  //方式二：借助 mapState 读取
  ...mapState('countAbout', ['sum', 'school', 'subject'])

4. 组件中读取 getters 数据

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

  //方式一：自己直接读取
  this.$store.getters['personAbout/firstPersonName']
  //方式二：借助 mapGetters 读取
  ...mapGetters('countAbout', ['bigSum'])

5. 组件中调用 dispatch

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

  //方式一：自己直接调用 dispatch
  this.$store.dispatch('personAbout/addPersonWang', person)
  //方式二：借助 mapActions 调用
  ...mapActions('countAbout', {addOdd: 'addOdd', addWait: 'addWait'})

6. 组件中调用 commit

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

  //方式一：自己直接调用 commit
  this.$store.commit('personAbout/ADD_PERSON', person)
  //方式二：借助 mapMutations 调用
  ...mapMutations('countAbout', {add: 'ADD', sub: 'SUB'})

四、模块化实例

效果如下：

https://www.bilibili.com/video/BV1G3411V73h?t=1.2

vuex模块化

index.js

模块化 count.js 和 person.js

  // 引入vue核心库
  import Vue from 'vue'
  // 引入Vuex
  import Vuex from 'vuex'
  import countOptions from './count'
  import personOptions from './person'
  // 应用Vuex插件
  Vue.use(Vuex)
  // 创建并暴露store
  export default new Vuex.Store({
      modules: {
          countAbout: countOptions,
          personAbout: personOptions
      }
  })

count.js

求和相关的配置

  // 求和相关的配置
  export default {
    // 开启命名空间
    namespaced: true,
    // 用于响应组件中的动作
    actions: {
      addOdd(context, value) {
        console.log('actions中的addOdd被调用了');
        if (context.state.sum % 2) {
          context.commit('ADD', value)
        }
      },
      addWait(context, value) {
        console.log('actions中的addWait被调用了');
          setTimeout(() => {
            context.commit('ADD', value)
          }, 500)
       }
    },
    // 用于修改state中的数据（state）
    mutations: {
      ADD(state, value) {
        console.log('mutations中的ADD被调用了');
        state.sum += value
      },
      SUB(state, value) {
        console.log('mutations中的SUB被调用了');
        state.sum -= value
      },
    },
    // 用于存储具体的数据
    state: {
      sum: 0, //当前的和
      school: '清华大学',
      subject: 'Web前端',
    },
    getters: {
      bigSum(state) {
        return state.sum * 10
      }
      }
  }

person.js

人员相关的配置

  import axios from 'axios'
  import { nanoid } from 'nanoid'
  export default {
    // 开启命名空间
    namespaced: true,
    // 用于响应组件中的动作
    actions: {
      addPersonWang(context, value){
        if(value.name.indexOf('王') === 0){
          context.commit('ADD_PERSON', value)
        }else{
          alert('添加的人必须姓王！')
          }
        },
      //连接服务器
      addPersonServer(context){
        axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
          response => {
            context.commit('ADD_PERSON', {id:nanoid(), name:response.data})
          },
          error => {
            alert(error.message)
          }
        )
      }
      },
    // 用于修改state中的数据（state）
    mutations: {
      ADD_PERSON(state, value) {
        console.log('mutations中的ADD_PERSON被调用了');
        state.personList.unshift(value)
      }
    },
    // 用于存储具体的数据
    state: {
      personList: [{
        id: '001',
        name: '张三'
      }]
    },
    getters: {
      firstPersonName(state){
        return state.personList[0].name
      }
    }
    }

Count.vue

  <template>
    <div>
      <h2>当前求和为：{{ sum }}</h2>
      <h3>当前求和放大10倍：{{ bigSum }}</h3>
      <h3>我在{{ school }}，学习{{ subject }}</h3>
      <h3 style="color: red">Person组件的总人数是：{{ personList.length }}</h3>
      <select v-model.number="n">
        <option :value="1">1</option>
        <option :value="2">2</option>
        <option :value="3">3</option>
      </select>
      <button @click="add(n)">+</button>
      <button @click="sub(n)">-</button>
      <button @click="addOdd(n)">当前求和为奇数再加</button>
      <button @click="addWait(n)">等一等再加</button>
    </div>
  </template>
  <script>
  import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
  export default {
    name: "myCount",
    data() {
      return {
        n: 1, //用户选择的数字
      };
    },
    computed: {
      ...mapState("countAbout", ['sum','school','subject']),
      ...mapState("personAbout", ['personList']),
      ...mapGetters('countAbout', ['bigSum']),
    },
    methods: {
      ...mapMutations('countAbout', { add: "ADD", sub: "SUB" }),
      ...mapActions('countAbout', { addOdd: "addOdd", addWait: "addWait" }),
    },
  };
  </script>
  <style scoped>
  button {
    margin-left: 5px;
  }
  </style>

Person.vue

  <template>
    <div>
      <h3>人员列表</h3>
      <h3 style="color: red">Count组件的求和为：{{ sum }}</h3>
      <h3>列表中第一个人的名字是：{{firstPersonName}}</h3>
      <input type="text" placeholder="请输入名字" v-model="name" />
      <button @click="addPerson">添加</button>
      <button @click="addPersonWang">添加姓王的</button>
      <button @click="addPersonServer">添加随机人</button>
      <ul>
        <li v-for="p in personList" :key="p.id">{{ p.name }}</li>
      </ul>
    </div>
  </template>
  <script>
  import { nanoid } from "nanoid";
  export default {
    name: "myPerson",
    data() {
      return {
        name: "",
      };
    }, 
    computed: {
      personList() {
        return this.$store.state.personAbout.personList;
      },
      sum() {
        return this.$store.state.countAbout.sum;
      },
      firstPersonName(){
          return this.$store.getters['personAbout/firstPersonName']
      }
    },
    methods: {
      addPerson() {
        const personObj = { id: nanoid(), name: this.name };
        this.$store.commit("personAbout/ADD_PERSON", personObj);
        this.name = "";
      },
      addPersonWang(){
          const personObj = { id: nanoid(), name: this.name };
          this.$store.dispatch('personAbout/addPersonWang', personObj)
          this.name = ''
      },
      addPersonServer(){
        this.$store.dispatch('personAbout/addPersonServer')
      }
    },
  };
  </script>
  <style scoped>
  button{
    margin-left: 5px;
  }
  </style>

不积跬步无以至千里不积小流无以成江海

Vue —— 进阶 Vuex（一）（四个 map 的用法、模块化和命名空间）

一、四个 map 的用法

1. mapState 方法

2. mapGetters 方法

实例：使用 mapState 和 mapGetters

3. mapActions 方法

4. mapMutations 方法

实例：使用 mapActions 和 mapMutations

二、多组件共享数据

三、模块化（module）和命名空间（namespace）

1. 目的

2. 修改 .store/xxx.js 文件

3. 组件中读取 state 数据

4. 组件中读取 getters 数据

5. 组件中调用 dispatch

6. 组件中调用 commit

四、模块化实例

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Vue —— 进阶 Vuex（一）（四个 map 的用法、模块化和命名空间）

一、四个 map 的用法

1. mapState 方法

2. mapGetters 方法

实例：使用 mapState 和 mapGetters

3. mapActions 方法

4. mapMutations 方法

实例：使用 mapActions 和 mapMutations

二、多组件共享数据

三、模块化（module）和命名空间（namespace）

1. 目的

2. 修改 .store/xxx.js 文件

3. 组件中读取 state 数据

4. 组件中读取 getters 数据

5. 组件中调用 dispatch

6. 组件中调用 commit

四、模块化实例

热门文章

最新文章

相关课程

相关电子书

相关实验场景