<template> <div class="count"> <h2 > 当前求和为 :{{sum}}</h2> <h3 > 当前求和放大十倍为为 :{{bigSum}}</h3> <h3 > 我在:{{address}} 学习:{{subject}}</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"]), /* ******************************************* */ // 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>
标签:...,写法,state,mapActions,mapMutations,vuex,store From: https://www.cnblogs.com/xiaobaizitaibai/p/16895073.html