getters的使用
-
概念:当state中的数据需要经过加工后再使用时,可以使用getters加工。
-
在
store.js
中追加getters
配置 -
组件中读取数据:
$store.getters.bigSum
Count.vue
<template>
<div>
<h1>当前值为: {
{$store.state.sum}}</h1>
<h2>数值放大{
{$store.getters.bigSum}}</h2>
<List/>
</div>
</template>
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
sum: 1
},
getters: {
bigSum(state) {
return state.sum * 10
}
}
})
//创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state,
getters
})