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']),
}
```