本节知识点
使用指南
- (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>
分数是{{$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>
