Vuex使用笔记
- store/index.js
// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
// export default new Vuex.Store({
export const store = new Vuex.Store({
state: {
count: 6
},
getters: {
doCount: (state, getters) => {
return getters.doneTodos.length;
},
doneTodos: state => state.count + 2
},
mutations: {
counts(state, v) {
state.count = v;
},
addNum(state, v) {
v ? state.count += v : state.count++
},
reduceNum(state) {
state.count--
}
},
actions: {
actionNumAdd(v) {
v.commit('addNum', 6);
},
actionNumReduce(v) {
v.commit('reduceNum', 6);
}
}
})
- src/main.js
- Demo.vue
<template>
<div id="app">
<input v-model="counts" />
<input v-model="getternum" />
<button @click="addnum1(2)">mutitaion+1</button>
<button @click="actionnum6">action+6</button>
</div>
</template>
<script>
import {mapState,mapMutations,mapActions,mapGetters} from 'vuex';
export default{
data(){
return {}
},
computed:{
...mapState({
counts:(state) => state.count
}),
...mapGetters({
getternum:'doneTodos'
})
},
methods:{
...mapMutations({
addnum1:'addNum' //相当于 this.addnum1 = this.$store.commit('addNum',addNum参数荷载)
}),
...mapActions({
actionnum6:'actionNumAdd' //相当于 this.actionnum6 = this.$store.dispatch('actionNumAdd',addNum参数荷载)
})
}
}
</script>
- 显示结果
-over-