[vue] vuex getters

getters的使用

1. 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。

2. 在store.js中追加getters配置

3. 组件中读取数据：$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
})