getter方法的作用 vuex_vuex - 基本使用 -- getter

有的组件中获取到 store 中的state, 需要对进行加工才能使用，computed 属性中就需要写操作函数，如果有多个组件中都需要进行这个操作，那么在各个组件中都写相同的函数，那就非常麻烦，这时可以把这个相同的操作写到store 中的getters, 每个组件只要引用getter 就可以了，非常方便。Getter 就是把组件中共有的对state 的操作进行了提取，它就相当于 对state 的computed. 所以它会获得state 作为第一个参数。

假设我们在点击increment按钮的时候，再增加一个额外的数，那么就需要在display.vue 中显示我们多增加了哪个数，同时在increment.vue 中要获得这个数进行相加。state 状态中增加 anotherIncrement: 5.要获取到state 中的这个值， 在每个组件中都要写computed: this.$store.state. countAnother, 这时就可以用getters, 然后在每个组件中computed 中使用getter.

display.vue 修改如下：

Count is {{count}}

AnoterIncrement is {{countAnother}}

import {mapState} from "vuex";

export default {

computed: {

...mapState(["count"]),

countAnother: function () { // 获取state

return this.$store.getters.countAnother;

}

}

}

increment.vue 修改如下，这里dispatch中，只能接受一个参数，如果我们要传多个参数的话，需要把所有的参数组装成对象。

import {mapActions} from "vuex";

export default {

data() {

return {

incrementValue: 0

}

},

computed: {

show: function() {

return this.$store.state.waiting;

},

countAnother: function () { // 获取getters

return this.$store.getters.countAnother;

}

},

methods: {

...mapActions(["increment","decrement"]),

incrementWithValue() {

// dispatch 只能接受一个参数，需要传对象参数

this.$store.dispatch("incrementWithValue", { value:this.incrementValue, anotherValue: this.countAnother})

}

}

}

store.js 修改如下：

const store = new Vuex.Store({

state: {

count:0,

// 新增waiting 状态

waiting: false,

// 额外需要增加的数字

anotherIncrement: 5

},

mutations: {

// 加1

INCREMENT(state) {

state.count++;

},

// 减1

DECREMENT(state) {

state.count--

},

INCREMENT_WITH_VALUE(state, value){

state.count = state.count + value.intValue + value.anotherValue;

},

// 显示和隐藏waiting

SHOW_WAITING_MESSAGE(state){

state.waiting = true;

},

HIDE_WAITING_MESSAGE(state){

state.waiting = false;

}

},

actions: {

increment({commit}){

commit("INCREMENT")

},

decrement({commit}){

commit("DECREMENT")

},

incrementWithValue({commit}, value){

commit("SHOW_WAITING_MESSAGE");

let intValue = parseInt(value.value)

let anotherValue = value.anotherValue

setTimeout(function() {

if(isNaN(intValue)) {

alert("Not an Interger")

}else {

commit("HIDE_WAITING_MESSAGE");

commit("INCREMENT_WITH_VALUE", {intValue, anotherValue})

}

}, 2000)

}

},

getters: { // getters

countAnother: function (state) {

return state.anotherIncrement

}

}

})

vuex 也提供了mapGetters 方法，和其的mapState,mapActions 是一样的，如果组件中使用的getters 和store 里面的getters 相同，那就用 数组形式，如果不相同，那就要用对象形式。

increment.vue 修改一下：

computed: {

show: function() {

return this.$store.state.waiting;

},

...mapGetters{["countAnother"]}

},

到这里，vuex 中的 state, action,mutation, getter 等重要概念就介绍完了，但是，我们把所有的getters, actions, mutations 都写到的store 中，如果有很多的话，代码可读性太差，所以就需要 action 创建一个actions.js 文件，mutations 创建一个mutation.js文件，getters 也创建一个getters.js文件，state 作为主要的入口文件命名为index.js，把这四个js文件放到store 文件夹中。

getters.js 文件如下：

export default {

countAnother: function (state) {

return state.anotherIncrement

}

}

actions.js 文件如下：

export default {

increment({commit}){

commit("INCREMENT")

},

decrement({commit}){

commit("DECREMENT")

},

incrementWithValue({commit}, value){

commit("SHOW_WAITING_MESSAGE");

let intValue = parseInt(value.value)

let anotherValue = value.anotherValue

setTimeout(function() {

if(isNaN(intValue)) {

alert("Not an Interger")

}else {

commit("HIDE_WAITING_MESSAGE");

commit("INCREMENT_WITH_VALUE", {intValue, anotherValue})

}

}, 2000)

}

}

muations 文件如下：

export default {

// 加1

INCREMENT(state) {

state.count++;

},

// 减1

DECREMENT(state) {

state.count--

},

INCREMENT_WITH_VALUE(state, value){

state.count = state.count + value.intValue + value.anotherValue;

},

// 显示和隐藏waiting

SHOW_WAITING_MESSAGE(state){

state.waiting = true;

},

HIDE_WAITING_MESSAGE(state){

state.waiting = false;

}

}

index.js 文件如下：

import Vue from "vue";

import Vuex from "vuex";

Vue.use(Vuex);

// 引入actions, mutations, getters

import actions from "./actions.js"

import mutations from "./mutations.js"

import getters from "./getters.js"

const state = {

count:0,

// 新增waiting 状态

waiting: false,

// 额外需要增加的数字

anotherIncrement: 5

}

export default new Vuex.Store({

state,

mutations,

actions,

getters

})