多组件共享数据

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

<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
  name: 'Count',
  data () {
    return {
      num:1,//用户选择的数字
    }
  },
  computed: {
    // 借助mapGetters生成计算属性，从state中读取数据---数组写法
    ...mapGetters(['bigSum']),
    
    // 借助mapState生成计算属性，从state中读取数据---数组写法
    ...mapState(['sum','school','subject','personList']),
  },
  methods: {

    // 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
    ...mapMutations({increment:'ADD',decrement:'JIAN'}),
 

    // 借助mapMutations生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
    ...mapActions({incrementOdd:'addOdd',incrementWait:'addWait'}),

  },
  mounted() {
    // console.log("Count",this.$store);
    // const x= mapState({add:'sum',school:'school',subject:'subject'});
    // console.log(x);
  }
}
</script>

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

</style>

<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 { nanoid } from 'nanoid';
export default {
  name:'Person',
  data () {
    return {
      name:''
    }
  },
  methods: {
    add() {
      const personObj = {id:nanoid(),name:this.name}
      // console.log(personObj);
      this.$store.commit('ADD_PERSON',personObj);
      this.name = '';

    }
  },
  computed: {
    personList() {
    return this.$store.state.personList;
  },
    sum() {
    return this.$store.state.sum;
  },
}
  
}
</script>

<style>

</style>

<template>
  <div>
    <Count></Count>
    <hr />
    <Person></Person>
  </div>
</template>

<script>
import Count from './Count.vue'
import Person from './Person.vue'

export default {
  name:'App',
  components: {Count,Person},
}
</script>

<style>

</style>

// 该文件用于创建store

import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'

// 准备actions，用于响应组件中的动作
const actions = {
  // add(context, value) {
  //   console.log('actions中的add被调用了');
  //   context.commit('ADD', value)
  // },
  // jian(context, value) {
  //   console.log('actions中的jian被调用了', context, value);
  //   context.commit('JIAN', value)
  // },
  addOdd(context, value) {
    console.log('actions中的addOdd被调用了');
    if (context.state.sum % 2) {
      context.commit('ADD', value);
    }
  },
  addWait(context, value) {
    console.log('actions中的addWait被调用了', context, value);
    setTimeout(() => {
      context.commit('ADD', value);
    }, 50)
  }
}

// mutation 用于操作数据（satate)
const mutations = {
  ADD(state, value) {
    console.log('mutation中的ADD被调用了', state, value);
    state.sum += value;
  },
  JIAN(state, value) {
    console.log('mutation中的JIAN被调用了', state, value);
    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: 'yh', age: 18 }
  ]
}

// 准备getters  用于将state中的数据进行加工
const getters = {
  bigSum(state) {
    return state.sum * 10
  }
}

Vue.use(Vuex)

// 传入一个配置对象
// 创建Store并暴露store
export default new Vuex.Store({
  actions,
  mutations,
  state,
  getters
})

// 导出(暴露)store
// export default store