vuex组件之间互相通信

<template>
  <div class="count">
    <h2 > 当前求和为 :{{sum}}</h2>
    <h3 > 当前求和放大十倍为为 :{{bigSum}}</h3>
    <h3 > 我在：{{address}} 学习：{{subject}}</h3>
    <h3 > 下方组件的总人数 ： {{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="increment(n)">+</button>
    <button @click="decrement(n)">-</button>
    <button @click="incrementOdd(n)">当前求和为奇数再加</button>
    <button @click="incrementWate(n)">等一等再加</button>
  </div>
</template>

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

export default {
    name:"Count",
    data() {
      return {
        n:1,//用户选择的数字
        
      }
    },
    computed:{
      /* 自己写的计算属性 */
      /* sum(){
        return this.$store.state.sum
      },     
      address(){
        //  console.log(this.$store)
        return this.$store.state.address
      },
      subject(){
        return this.$store.state.subject
      }, */
      /* **************************** */
      // 借助mapState生成计算属性，从state中读取数据（对象写法）
      /* ...mapState({
        sum:"sum",
        address:"address",
        subject:"subject",
      }), */
      // 借助mapState生成计算属性，从state中读取数据（数组写法）
      ...mapState(["sum","address","subject","personList"]),

      /* ******************************************* */
      // bigSum(){
      //   return this.$store.getters.bigSum
      // },
      // 借助mapGetters生成计算属性，从state中读取数据（对象写法）
      /* ...mapGetters({
        bigSum:"bigSum",
      }), */
      // 借助mapGetters生成计算属性，从state中读取数据（数组写法）
      
    ...mapGetters(["bigSum"]),

    },
    methods: {
     /*  increment(){
        // this.$store.dispatch('jia',this.n)
        this.$store.commit('JIA',this.n)
      },
      decrement(){
        this.$store.commit('JIAN',this.n)
      }, */

      // 借助mapMutations生成对应的方法，方法中调用commit去联系mutations（对象写法）
      ...mapMutations({
        increment:"JIA",
        decrement:"JIAN",

      }),

       // 借助mapMutations生成对应的方法，方法中调用commit去联系mutations（数组写法）
      //  ...mapMutations(["",""]),需要改成一样的才能用此方法

      /* ****************************** */
      /* incrementOdd(){
       
        // if (this.Sstore.state.sum%2) {
           this.$store.dispatch('jiaOdd',this.n)
        // }
      },
      incrementWate(){
        // setTimeout(() => {
         this.$store.dispatch('jiaWate',this.n)
        // }, 500);
      }, */

      // 借助mapActions生成对应的方法，方法中调用dispatch去联系action（对象写法）
      ...mapActions({
        incrementOdd:"jiaOdd",
        incrementWate:"jiaWate",
      }),

      // 借助mapActions生成对应的方法，方法中调用dispatch去联系action（数组写法）要改成想对应的名字
      
      // ...mapActions([
      //   "",
      //   ""
      // ])
    },
    mounted() {
      // console.log(this.$store) 
    },
    
}
</script>

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

<template>
    <div>
        <h1>人员列表</h1>
        <input type="text" placeholder="请输入名字" v-model="name"/>
        <button @click="add">添加</button>
        <ul>
            <li v-for="p in $store.state.personList" :key="p.id">{{p.name}}</li>
        </ul>
    </div>
</template>

<script>
import {nanoid} from 'nanoid'
export default {
    name:"Person",
    mounted() {
    },
    data() {
        return {
            name:""
        }
    },
    methods: {
        add(){
            const personObj={id:nanoid(),name:this.name}
            console.log(personObj)
            this.$store.commit("ADD_PERSON",personObj)
            this.name=""
        }
    },

}
</script>

<style>

</style>

//该文件用于创建vuex中的store

//引入vuex
import Vue from 'vue'
import Vuex from 'vuex'
//使用插件
Vue.use(Vuex);
//猪备actions--用于响应组件中的动作
const actions={
    // jia:function (context,vaule) {
    //     context.commit("JIA", vaule)
    // },
    // jian: function (context, vaule) {
    //     context.commit("JIAN", vaule)
    // },
    jiaOdd: function (context, vaule) {

        if (context.state.sum%2) {
            context.commit("JIA", vaule)
        }   
    },
    jiaWate: function (context, vaule) {
        setTimeout(() => {
            context.commit("JIA", vaule)
        }, 500);
    },

}

// 准备mutations--用于操作数据（state）
const mutations = {
    JIA:function (state,value) {
        state.sum+=value;
    },
    JIAN: function (state, value) {
        state.sum -= value;
    },
    ADD_PERSON(state, value){
        state.personList.unshift(value)
    }
}

//准备state--用于存储数据
const state = {
    sum: 0,//当前的和
    address:"beijing",
    subject:"qianduan",
    personList:[
        {id:"001",name:"xiaobai"}
    ]
}

//用于将state中的数据进行加工
const  getters={
    bigSum(state){
        return state.sum*10
    }
}
//创建store
const store=new Vuex.Store({
    actions: actions,
    mutations: mutations,
    state: state,
    getters: getters
});



//导出store

export default store