vue借助mapstate映射实现多组件间的相互通信

代码示例： Person组件：

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

<style>
</style>

Count组件：

<template>
  <div>
    <h1>当前求和为{{ sum }}</h1>
    <h1 style="color: red">Person组件列表的总人数为{{ personlist.length }}</h1>
    <select v-model="number">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="add">+</button>
    <button @click="reduce">-</button>
    <button @click="odd_add">当前求和为奇数再加</button>
    <button @click="wait">等2s再显示数据</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "Count",
  data() {
    return {
      number: 1, //用户选择的数字
    };
  },
  computed: {
    ...mapState(["sum", "personlist"]),
  },
  methods: {
    add() {
      this.$store.commit("JIA", this.number);
    },
    reduce() {
      this.$store.commit("JIAN", this.number);
    },
    odd_add() {
      this.$store.dispatch("jishujia", this.number);
    },
    wait() {
      setTimeout(() => {
        this.$store.dispatch("waitjia", this.number);
      }, 3000);
    },
  },
};
</script>

<style lang="css" scoped>
button {
  margin-left: 5px;
}
</style>

vuex中：

//改文件用于创建Vuex中最为核心的store

//引入Vue
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//准备actions - 用于响应组件中的动作
const actions = {
    // add与reduce的调用也仅此为了传递commit给mutations。
    // 所以我们前边直接使用了 this.$store.commit  根本不需要经过actions

    // add(context, value) {
    //     context.commit('ADD', value)
    // },
    // reduce(context, value) {
    //     context.commit('SUB', value)
    // },
    jishujia: function (context, value) {
        if (context.state.sum % 2 == 1) {
            console.log("actions里的jia调用");
            context.commit('JIUSHUJIA', value)
        }
    },
    waitjia: function (context, value) {
        setTimeout(() => {
            console.log("actions里的jia调用");
            context.commit('WAITJIA', value)
        }, 500);
    }
}
//准备mutations- 用于操作数据(state)
const mutations = {
    JIA(state, value) {
        state.sum += value
        console.log("commit中的JIA调用")
    },
    JIAN(state, value) {
        state.sum -= value
        console.log("commit中的JIAN调用")
    },
    JIUSHUJIA(state, value) {
        state.sum += value
        console.log("commit中的JIUSHUJIA调用")
    },
    WAITJIA(state, value) {
        state.sum += value
        console.log("commit中的WAITJIA调用")
    },
    ADD_PERSON(state, value) {
        state.personlist.unshift(value)
        console.log("commit中的ADD_PERSON调用")
    }
}
//准备state - 用于存储数据
const state = {
    sum: 2,//初始数据为0
    personlist: [
        { id: '001', name: '张三' }
    ],
}

//1.使用插件
Vue.use(Vuex)

//2.创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

使用生成唯一id的这个nanoid包时要npm一下

import { nanoid } from "nanoid";

npm i nanoid

 这里使用mapstate使用数组的方式，相当于手写personlist方法然后return 这一长串的东西。

// 在Person组件里 使用Count组件中的sum 
<h1 style="color: red">Count组件列表的求和为{{ sum }}</h1>

....
// 如果下面不使用计算属性 li里的personlist就要写成 $store.state.personlist
  <li v-for="p in personlist" :key="p.id">
        {{ p.name }}
      </li>

....

 computed: {
    // personlist() {
    //   return this.$store.state.personlist;
    // },
    ...mapState(["personlist", "sum"]),
  },

在Count组件中：

 <h1 style="color: red">Person组件列表的总人数为{{ personlist.length }}</h1>

....

// 直接把Person组件中的personlist添加到mapstae中实现复用
  computed: {
    ...mapState(["sum", "personlist"]),
  },

调试一下就能理解，记录个博客更能加深印象。