Vue  vuex配置项和多组件数据共享案例分享

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

//创建并暴露store
export default new Vuex.Store({
    ......
    getters,
});

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

//创建并暴露store
export default new Vuex.Store({
    ......
    getters,
});

const state = {
    sum: 0,//当前和
    school:"三里屯小学",
    subject:"Vue",
}

    <h1>当前求和为：{{$store.state.sum}}</h1>
    <h3>当前求和10倍为：{{$store.getters.bigSum}}</h3>
    <h3>我在：{{$store.state.school}}学习{{$store.state.subject}}</h3>

    <h1>当前求和为：{{he}}</h1>
    <h3>当前求和10倍为：{{$store.getters.bigSum}}</h3>
    <h3>我在：{{xuexiao}}学习{{xueke}}</h3>

computed:{
    he(){
      return this.$store.state.sum
    },
    xuexiao(){
      return this.$store.state.school
    },
    xueke(){
      return this.$store.state.subject
    }
  }

   <h1>当前求和为：{{he}}</h1>
    <h3>当前求和10倍为：{{$store.getters.bigSum}}</h3>
    <h3>我在：{{xuexiao}}学习{{xueke}}</h3>
    computed:{
        //借助mapstate生成计算属性，从state中读取数据（对象写法）
        ...mapState({he:"sum",xuexiao:"school",xueke:"subject"})
        //或者
        //借助mapstate生成计算属性，从state中读取数据（数组写法）
           ...mapState(['sum','school',"subject"])
      },

    let obj1 = {x:100,y:200}
        let obj2 = {
            a:1,
            ...obj1,
            b:2,
     }
     console.log(obj2);

<h3>当前求和10倍为：{{ bigSum }}</h3>

computed: {
   ......
    //...mapGetters({bigSum:'bigSum'})
    ...mapGetters(['bigSum'])
  },

  <button @click="increment(n)">+</button>
    <button @click="decrement(n)">-</button>

    methods: {
    /*increment() {
      this.$store.commit("JIA", this.n);
    },
    decrement() {
      this.$store.commit("JIAN", this.n);
    },*/
    ...mapMutations({"increment":"JIA","decrement":"JIAN"}),
   ......
  }

  <button @click="JIA(n)">+</button>
    <button @click="JIAN(n)">-</button>

    //借助 mapMutations 生成对用的方法，方法中会调用 commit去联系mutations(数组写法)
    ...mapMutations(["JIA","JIAN"]),

    <button @click="incrementOdd(n)">当前和为奇数再加</button>
    <button @click="incrementWait(n)">等一等再加</button>
    
methods:{
    //借助 mapActions 生成对用的方法，方法中会调用 dispatch 去联系 actions(对象写法)
    ...mapActions({incrementOdd:"jiaOdd",incrementWait:"jiaWait"})
}

 <button @click="jiaOdd(n)">当前和为奇数再加</button>
    <button @click="jiaWait(n)">等一等再加</button>
    methods:{
    //借助 mapActions 生成对用的方法，方法中会调用 dispatch 去联系 actions(数组写法)
    ...mapActions(["jiaOdd","jiaWait"])
    }

......
//准备mutations；用于操作数据（state）
const mutations = {
    ......
    ADD_PERSON(state,value){
        console.log("mutations中的ADD_PERSON被调用了",state,value);
        state.personList.unshift(value)
    }
}

//准备state；用于存储数据
const state = {
    ......
    personList:[
        {id:"001",name:"张三"},
        {id:"002",name:"李四"}
    ]
}
......

<template>
  <div class="category">
    <h1>人员信息</h1>
    <input type="text" placeholder="请输入名字" v-model="name"/>
    <button @click="add">添加</button>
    <ul>
      <li v-for="person in personList" :key="person.id">{{person.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}
      this.$store.commit("ADD_PERSON",personObj)
    }
  },
  computed:{
    personList(){
      return this.$store.state.personList;
    }
  }
}
</script>

<style scoped>
select, button {
  margin-right: 5px;
}
</style>

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

<script>
import Count from "@/components/Count";
import Person from "@/components/Person";

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

<style>

</style>

<h3 style="color: red">Person组件的总人数为{{personList.length}}</h3>

<script>
......
export default {
  ......
  computed: {
  ...
    ...mapState(['sum','school',"subject","personList"])
    ...
  }
  ......
}
</script>

<h3 style="color: red">Count组件求和为{{sum}}</h3>
<script>
......
export default {
  ......
  computed:{
    ......
    sum(){
      return this.$store.state.sum;
    }
  }
}
</script>