猿记录

一个记录、分享的博客

您的位置:主页 > 技术专栏 > javascript > vue >

vuex actions 的使用

2017-08-22 21:46:46 作者:yxl 次阅读 vue

store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
 
const state = {
count:1
}
//如果要改变state的值的话,需要添加这个mutations
const mutations = {
add(state){
state.count++
},
reduce(state){
state.count--
}
 
}
//可以把他看作在获取数据之前进行的一种再编辑,相当于对数据的一个过滤和加工。
const getters = {
count:(state)=>{
return state.count += 100
}
}
const actions = {
addAction(context){
context.commit('add',10);
},
reduceAction({commit}){
commit('reduce')
}
}
 
 
export default new Vuex.Store({
state,
mutations,
getters,
actions
})
2、模板中
<template>
<div>
{{ count }}
<p>
<button @click="add">++</button>
<button @click="$store.commit('reduce')">--</button>
</p>
<p>
<button @click="addAction">++</button>
<button @click="reduceAction">--</button>
</p>
</div>
</template>
 
<script>
import store from "@/vuex/store";
import { mapState,mapMutations,mapGetters,mapActions } from 'vuex';
export default{
data(){
return {
msg:'初次使用vuex'
}
},
//注意这里如果computed 如要多个属性,的话要使用es6的扩展符号...
computed:{
...mapState(['count']),
...mapGetters(['count'])
}, 
methods:{
// ...mapMutations(['add']),
...mapActions(['addAction','reduceAction'])
},
store
}
</script>
<style>
 
</style>

凡本站注明“本站”或“投稿”的所有文章,版权均属于本站或投稿人,未经本站授权不得转载、摘编或利用其它方式使用上述作品。

编辑:yxl 关键词:
0

网友评论