1. Count.vue
<template> <div><h1>当前求和位{{ sum}}</h1> <h1>当前求和放大10倍后是{{ bigSum }}</h1> <h1>我在{{school }},学习{{ subject }}</h1> <select v-model.number="n"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> <button @click="increment(n)">+</button> <button @click="decrement(n)">-</button> <button @click="incrementOdd(n)">当前和为奇数在加</button> <button @click="incrementWait(n)">等一等在加</button> </div> </template>
<script> import { mapState ,mapGetters,mapMutations,mapActions} from 'vuex' export default { name:'Count', data(){ return { n:1, } }, computed:{ // 靠程序员自己去写计算属性 // qiuhe(){ // return this.$store.state.sum // }, // xuexiao(){ // return this.$store.state.school // }, // xueke(){ // return this.$store.state.subject // } //借助mapState 生成计算属性从 state 中读取数据 对象写法 //...mapState({sum:'sum',school:'school',subject:'subject'}) //借助mapState 生成计算属性从 state 中读取数据 数组写法 ...mapState(['sum','school','subject']), //借助mapGetters 生成计算属性从 state 中读取数据 对象写法 //...mapGetters({bigSum:'bigSum'}) //借助mapGetters 生成计算属性从 state 中读取数据 数组写法 ...mapGetters(['bigSum']), },
mounted(){ console.log('countvue',this) }, methods:{ // 程序猿亲自写方法 // increment(){ // //this.$store.dispatch('jia',this.n) // this.$store.commit('JIA',this.n) // },
// decrement(){ // //this.$store.dispatch('jian',this.n) // this.$store.commit('JIAN',this.n) // }, //mapMutations 生成对应的方法防 方法中会调用commit去联系mutations 对象写法 ...mapMutations({increment:'JIA',decrement:'JIAN'}),
//mapMutations 生成对应的方法防 方法中会调用commit去联系mutations 数组写法 //...mapMutations({'JIA','JIAN'}) // incrementOdd(){ // this.$store.dispatch('incrementOdd',this.n) // }, // incrementWait(){ // this.$store.dispatch('incrementWait',this.n) // } // 借助mapActions 生成对应的方法，方法中会调用dispatch 方法去联系actions 对象写法 //...mapActions({incrementOdd:'incrementOdd',incrementWait:'incrementWait'}), // 借助mapActions 生成对应的方法，方法中会调用dispatch 方法去联系actions 数组写法 ...mapActions(['incrementOdd','incrementWait'])
} } </script>
<style> button{ margin-left: 10px; }
</style> 2. store/index.js //改文件用于创建vuex 最为核心的 store import Vue from 'vue' //引入vuex import Vuex from 'vuex' Vue.use(Vuex) // 准备actions ---用于响应组件中的动作 const actions={ // 没有逻辑 可以直接 mutations jia(conext,value){ //console.log("actions里面的jia被调用了",conext,value) conext.commit('JIA',value) }, jian(conext,value){ //console.log("actions里面的jian被调用了",conext,value) conext.commit('JIAN',value) }, incrementOdd(conext,value){ //console.log("actions里面的incrementOdd被调用了",conext,value) if(conext.state.sum%2){ conext.commit('JIA',value) }
},
incrementWait(conext,value){ //console.log("actions里面的incrementWait被调用了",conext,value) setTimeout(() => { conext.commit('JIA',value) }, 500);
},
} //准备mutations--用于操作数据（state） const mutations={ JIA(state,value){ //console.log("mutations里面的jia被调用了",state,value) state.sum+=value }, JIAN(state,value){ //console.log("mutations里面的jian被调用了",state,value) state.sum-=value }, } //准备state --用于存储数据 const state={ sum:0, school:"尚硅谷", subject:"前端" } // 准备getters 用于将state 中的数据进行加工 const getters = { bigSum(state){ return state.sum * 10 } } // 创建store 暴露store export default new Vuex.Store({ actions, mutations, state, getters }) 3. 总结
1. <strong>mapState方法：</strong>用于帮助我们映射```state```中的数据为计算属性
```js
computed: {
//借助mapState生成计算属性：sum、school、subject（对象写法）
...mapState({sum:'sum',school:'school',subject:'subject'}),
//借助mapState生成计算属性：sum、school、subject（数组写法）
...mapState(['sum','school','subject']),
},
```
2. <strong>mapGetters方法：</strong>用于帮助我们映射```getters```中的数据为计算属性
```js
computed: {
//借助mapGetters生成计算属性：bigSum（对象写法）
...mapGetters({bigSum:'bigSum'}),
//借助mapGetters生成计算属性：bigSum（数组写法）
...mapGetters(['bigSum'])
},
```
3. <strong>mapActions方法：</strong>用于帮助我们生成与```actions```对话的方法，即：包含```$store.dispatch(xxx)```的函数
```js
methods:{
//靠mapActions生成：incrementOdd、incrementWait（对象形式）
...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
//靠mapActions生成：incrementOdd、incrementWait（数组形式）
...mapActions(['jiaOdd','jiaWait'])
}
```
4. <strong>mapMutations方法：</strong>用于帮助我们生成与```mutations```对话的方法，即：包含```$store.commit(xxx)```的函数
```js
methods:{
//靠mapActions生成：increment、decrement（对象形式）
...mapMutations({increment:'JIA',decrement:'JIAN'}),
//靠mapMutations生成：JIA、JIAN（对象形式）
...mapMutations(['JIA','JIAN']),
}
```
标签：map,vue,...,--,sum,value,state,conext,store From： https://www.cnblogs.com/satisfysmy/p/17663625.html