不使用mapActions 和 mapMutations的代码
要用的地方字体放大了
<template>
<div id="app">
<h1>当前总数为:{{nbr}}</h1>
<h2>放大十倍总数为:{{bigSum}}</h2>
<h3>我在{{school}}我是{{myname}}</h3>
<select v-model.number="n">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button @click="add">+</button>
<button @click="subtract">-</button>
<button @click="odd">为奇数再加</button>
<button @click="item">等一等再加</button>
<!-- <router-view/> -->
</div>
</template>
<script>
import {mapState,mapGetters} from 'vuex';
export default{
data(){
return{
n:1,
}
},
computed:{
...mapState(['nbr','school','myname']),
// 数组写法 从getters里读取对象
...mapGetters(['bigSum'])
},
methods:{
add(){
// 调用add方法
this.$store.dispatch('add',this.n)
},
subtract(){
this.$store.dispatch('subtract',this.n)
},
odd(){
this.$store.dispatch('odd',this.n)
},
item(){
this.$store.dispatch('item',this.n)
}
},
}
</script>
<style lang="less" scoped>
button{
margin-left: 5px;
}
</style>
mapMutations:
使用后：给事件加上参数n
<template>
<div id="app">
<h1>当前总数为:{{nbr}}</h1>
<h2>放大十倍总数为:{{bigSum}}</h2>
<h3>我在{{school}}我是{{myname}}</h3>
<select v-model.number="n">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button @click="add(n)">+</button>
<button @click="subtract(n)">-</button>
<button @click="odd">为奇数再加</button>
<button @click="item">等一等再加</button>
<!-- <router-view/> -->
</div>
</template>
<script>
import {mapState,mapGetters,mapMutations} from 'vuex';
export default{
data(){
return{
n:1,
}
},
computed:{
...mapState(['nbr','school','myname']),
// 数组写法 从getters里读取对象
...mapGetters(['bigSum'])
},
methods:{
//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations
...mapMutations({add:'add',subtract:'subtract'}),
odd(){
this.$store.dispatch('odd',this.n)
},
item(){
this.$store.dispatch('item',this.n)
}
},
}
</script>
<style lang="less" scoped>
button{
margin-left: 5px;
}
</style>
mapActions:
记得给事件加参数n
<button @click="add(n)">+</button>
<button @click="subtract(n)">-</button>
<button @click="odd(n)">为奇数再加</button>
<button @click="item(n)">等一等再加</button>
methods:{
// odd(){
// this.$store.dispatch('odd',this.n)
// },
// item(){
// this.$store.dispatch('item',this.n)
// }
//对象写法
...mapActions({odd:'odd',item:'item'}),
//数组写法
...mapActions({'odd','item'}),
},
store.js文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
// 用于存储数据
state: {
nbr:0,//当前的和
school:'京海学校',
myname:'张三'
},
// 用于操作数据
mutations: {
// 加
add(state,value){
state.nbr +=value
},
// 减
subtract(state,value){
state.nbr -=value
},
// 是奇数再加
odd(state,value){
if (state.nbr % 2 ==1) {
state.nbr += value
}
},
// 等一等再加
item(state,value){
setTimeout(()=>{
state.nbr += value
// console.log(this.nbr);
// // 时间间隔
},1000)
},
},
// 用于响应组件中的动作
actions: {
add (context,value){
//context.commit('名字不是固定的可以和主页面的名字不一样',value)
context.commit('add',value)
},
subtract (context,value){
context.commit('subtract',value)
},
odd(context,value){
context.commit('odd',value)
},
item(context,value){
context.commit('item',value)
}
},
getters:{
bigSum(state){
return state.nbr*10
}
}
})