本節(jié)知識點
- 利用getters直接在vuex中操作數(shù)據(jù)
使用指南
- (1) 在vuex 文件中也就是store.js中寫下面代碼,重點就是getters
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const start = 10;
function jisuan(){
return start+10;
}
const state={
score:jisuan()
};
const mutations = {
add:function(state,n){state.score+=n;},
del:function(state,n){state.score-=n;}
};
const getters = {
score:function(state){
return state.score+=10;
}
}
export default new Vuex.Store({
state,
mutations,
getters
})
<template>
<div>
<div>
{{msg}}
</div>
<div>
分數(shù)是{{$store.state.score}} --這個就是mapState屬性{{score}}--計算后的getter {{$store.getters.score}}
</div>
<div>
<button @click="$store.commit('add',5)">添加</button>
<button @click="$store.commit('del',5)">減少</button>
</div>
</div>
</template>
<script type="text/ecmascript-6">
import store from "@/vuex/store";
import {mapState} from "vuex";
export default {
data(){
return {
msg:"測試vuex"
}
},
store,
computed: mapState(["score"])
}
</script>
<style scoped>
</style>
