为什么计数器不使用getter显示在vuejs中

Question

正如您在下面的代码中看到的，我有store.js，在那里我使用getters将我的值加倍2，但在访问它时会导致这种情况$store.state.doubelCounter；显示为未定义。

我有这个用于vuex 的store.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
counter: 0
},
getters: {
doubleCounter: state => {
return state.counter * 2;
} 
}
})

这是counter.vue:

<template>
<div>
<button class="btn btn-primary" @click="increment">Increment</button>
<button class="btn btn-primary" @click="decrement">Decrement</button>
</div>
</template>
<script>
export default {
methods: {
increment() {
this.$store.state.counter++;
},
decrement() {
this.$store.state.counter--;
}
}
}
</script>

这是result.vue:

<template>
<p>Counter is: {{ counter }}</p>
</template>
<script>
export default {
computed: {
counter() {
return this.$store.state.doubelCounter;
},
},
};
</script>

Answer 1

首先，您不能直接更改商店的状态。做到这一点的唯一方法是进行突变：

export const store = new Vuex.Store({
state: {
counter: 0
},
getters: {
doubleCounter: state => state.counter * 2
},
mutations: {
incrementCounter(state) {
state.counter++;
},
decrementCounter(state) {
state.counter--;
}
},
})

然后，在counter.vue:中

<template>
<div>
<button class="btn btn-primary" @click="incrementCounter">Increment</button>
<button class="btn btn-primary" @click="decrementCounter">Decrement</button>
</div>
</template>
<script>
import { mapMutations } from 'vuex';
export default {
methods: {
...mapMutations(['incrementCounter', 'decrementCounter'])
}
}
</script>

其次，要访问商店的getter，应该在result.vue:中使用$store.getters而不是$store.state

<template>
<p>Counter is: {{ counter }}</p>
</template>
<script>
export default {
computed: {
counter() {
return this.$store.getters.doubleCounter; // "doubel" typo fixed
},
},
};
</script>