getters的使用

作用：类似于过滤器，数据输出之前可以操作数据。

案例：在HelloWorld组件中输出num之后，拼接字符“元”。

Vuex代码

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

var store = new Vuex.Store({
  state: {
    num: 10
  },
  getters: {
    //1．定义方法，传入state
    newnum(state) {
      //2．将新数据return出去
      return state.num + '元';
    }
  }
});

export default store;

HelloWorld组件代码

<div class="hello">
    <h1>{{$store.getters.newnum}}</h1>
</div>

运行结果如图 10-1 所示。

代码解析如下。

getters 属性和 state 属性平级，可以过滤 state 中的数据。

Figure 1. 图10-1　渲染getters数据