Vuex_多组件共享数据

Vuex多组件共享数据

components下有两个子组件MyCount和MyPerson，其代码如下

MyCount.vue

<template>
  <div>
    <h1>当前求和为：{{ sum }}</h1>
    <h3>当前和放大10倍后为：{{ bigSum }}</h3>
    <h3>我在{{ school }}，学习{{ subject }}</h3>
    <h3 style="color: red">
      MyPerson组件中人员列表的人数为：{{ personList.length }}
    </h3>
    <select v-model="n">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="increment(n)">+</button>
    <button @click="decrement(n)">-</button>
    <button @click="incrementOdd">当前求和为奇数再加</button>
    <button @click="incrementWait">等一等再加</button>
  </div>
</template>

<script>
import { mapGetters, mapState, mapMutations, mapActions } from "vuex";

export default {
  name: "MyCount",
  data() {
    return {
      n: 1, //用户选择的数据
      // sum: 0, //当前的和
    };
  },
  computed: {
    //借助mapState生成计算属性，从state中读取数据（数组写法）
    ...mapState(["sum", "school", "subject", "personList"]),
    //借助mapGetters生成计算属性，从getters中读取数据(数组写法)
    ...mapGetters(["bigSum"]),
  },

  methods: {
    //上边的方法需要传入参数n
    //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
    ...mapMutations({ increment: "JIA", decrement: "JIAN" }),
    //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
    ...mapActions({ incrementOdd: "jiaOdd", incrementWait: "jiaWait" }),
  },
  mounted() {
    // console.log("MyCount", this);
  },
};
</script>

<style>
button {
  margin-left: 5px;
}
</style>

MyPerson.vue

<template>
  <div>
    <h1>人员列表</h1>
    <h3 style="color: red">MyCount组件中的和为：{{ sum }}</h3>
    <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 MyCount from './MyCount'
import { nanoid } from "nanoid";
import { mapState } from "vuex";
export default {
  //   components: { MyCount },
  name: "MyPerson",
  data() {
    return {
      name: "",
    };
  },
  computed: {
    // personList() {
    //   return this.$store.state.personList;
    // },
    ...mapState(["personList", "sum"]),
  },
  methods: {
    add() {
      const personObj = { id: nanoid(), name: this.name };
      this.$store.commit("ADD_PERSON", personObj);
      this.name = "";
    },
  },
};
</script>

vuex：store/index.js

//该文件用于创建Vue中最为核心的store

//引入vue
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions——用于响应组件中的动作
const actions = {
    jia(context, value) {
        console.log('actions中的jia被调用了');
        context.commit('JIA', value)
    },
    jian(context, value) {
        console.log('actions中的jian被调用了');
        context.commit('JIAN', value)
    },
    jiaOdd(context, value) {
        console.log('actions中的jiaOdd被调用了');
        if (context.state.sum % 2) {
            context.commit('JIA', value)
        }
    },
    jiaWait(context, value) {
        console.log('actions中的jiaWait被调用了');
        setTimeout(() => {
            context.commit('JIA', value)
        }, 500);
    }
}
//准备mutationgs——用于操作数据（state）
const mutations = {
    JIA(state, value) {
        console.log('mutations中的JIA被调用了');
        state.sum += value
    },
    JIAN(state, value) {
        console.log('mutations中的JIAN被调用了');
        state.sum -= value
    },
    ADD_PERSON(state, value) {
        console.log('mutations中的ADD_PERSON被调用了');
        state.personList.unshift(value)
    }
}
//准备state——用于存储数据
const state = {
    sum: 0,//当前的和
    school: '尚硅谷',
    subject: '前端',
    personList: [
        { id: '001', name: '张三' }
    ]
}
//getters的使用
const getters = {
    bigSum(state) {
        return state.sum * 10
    }
}

//创建store
const store = new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

//暴露（导出）store
export default store

数据共享如下：