vuex/state.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const state={
count:1,
}
const mutations={
add(state,n){//添加
state.count+=n;
},
reduce(state){//相减
if(state.count>1){
state.count--;
}
}
}
//向外部暴露
export default new Vuex.Store({
state,
mutations
});
count.vue
<template>
<div>
<h2>{{msg}}</h2><hr/>
<h3>{{count}}</h3>
<p>
<!--传参-->
<button @click="$store.commit('add',10)">+</button>
<!--不传参-->
<button @click="reduce">-</button>
</p>
</div>
</template>
<script>
import store from '@/vuex/store'
import {mapState,mapMutations} from 'vuex'
export default{
data(){
return{
msg:'hello Vuex'
}
},
computed:mapState(['count']),//计算属性运用mapState 数值方式
methods:mapMutations(['add','reduce']),//计算属性运用mapMutations 数值方式
store
}
</script>
$store.commit( )
Vuex提供了commit方法来修改状态,我们粘贴出第一节课的代码内容,简单回顾一下,我们在button上的修改方法。
1 2 | <button @click="$store.commit('add')">+</button> <button @click="$store.commit('reduce')">-</button> |
store.js文件:
1 2 3 4 5 6 7 8 | const mutations={ add(state){ state.count++; }, reduce(state){ state.count--; } } |
传值:
这只是一个最简单的修改状态的操作,在实际项目中我们常常需要在修改状态时传值。比如上边的例子,是我们每次只加1,而现在我们要通过所传的值进行相加。其实我们只需要在Mutations里再加上一个参数,并在commit的时候传递就就可以了。我们来看具体代码:
现在store.js文件里给add方法加上一个参数n。添加的地方我已经标黄了。
1 2 3 4 5 6 7 8 | const mutations={ add(state,n){ state.count+=n; }, reduce(state){ state.count--; } } |
在Count.vue里修改按钮的commit( )方法传递的参数,我们传递10,意思就是每次加10.
1 2 3 4 | <p> <button @click="$store.commit('add',10)">+</button> <button @click="$store.commit('reduce')">-</button> </p> |
这样两个简单的修改我们就完成了传值,我们可以在浏览器中实验一下了。
模板获取Mutations方法
实际开发中我们也不喜欢看到$store.commit( )这样的方法出现,我们希望跟调用模板里的方法一样调用。
例如:@click=”reduce” 就和没引用vuex插件一样。
要达到这种写法,只需要简单的两部就可以了:
- 在模板count.vue里用import 引入我们的mapMutations:
1
import { mapState,mapMutations } from 'vuex';
- 在模板的<script>标签里添加methods属性,并加入mapMutations
1
2
3
methods:mapMutations([
'add','reduce'
]),
通过上边两部,我们已经可以在模板中直接使用我们的reduce或者add方法了,就像下面这样。
1 | <button @click="reduce">-</button> |