内容纲要
const store = new Vuex.Store({
    state: {
        isLoading: false,
        todos: []
    },

    mutations: {
        SET_LOADING_STATUS(state) {
            state.isLoading = !state.isLoading
        },

        SET_TODOS(state, todos) {
            state.todos = todos
        }
    },

    actions: {
        fetchTodos(context) {
            context.commit('SET_LOADING_STATUS')
            axios.get('/api/todos').then(response => {
                context.commit('SET_LOADING_STATUS')
                context.commit('SET_TODOS', response.data.todos)
            })
        }

    }
})

访问 state 方式

  1. 直接访问
<template>
    {{ this.$store.state.user }}
</template>
  1. 计算属性
<template>
    <div>
        {{ user }}
    </div>
</template>

<script>
    export default {
        computed: {
            user() {
                return this.$store.state.user
            }
        }
    }
</script>
  1. 计算属性帮助函数
<template>
    <div>
        {{ user }}
    </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
    computed: mapState({
        user: state => state.user
    })
}
</script>

简写为

computed:mapState(['posts','user','comments','shopping_cart'])

mapGetters

带参数的 getters

export default  new Vuex.Store({
   getters:{
    search(state) {
      return keyword => state.items.filter(item =>{
        return item.name === keyword
      });
    }
  }
})

export default {
    name: 'items',
    computed: {
      search () {
        return this.$store.getters.search('foo')
      }
    }
  }

Today, while working on a project with Vue.js and VueX, I found an apparent limitation of the vuex store.

It seem that it’s not possible to pass parameters to a getter, when it’s being mapped by mapGetters.

I’ve declared normally my getter in the store like the following:

getters: {
  getProcess: state => processId => {
    return state.process.processId;
  }
}

Then, imported has a computed property, inside my vue.js component

import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['getProcess'])
  }
};

but when I tried to use it in the template section

{{ getProcess(1) }}

I was getting the following error in the browser console

TypeError: a.getProcess is not a function
Apparently is seem that you can’t call directly into the template a getter from a store with parameters, therefor a way to overcome this limitation is by adding the following method into you component

methods: {
  getProcessFromStore(processId) {
    return this.getProcess(1);
  }
}

turning your script section into the following:

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['getProcess'])
  },
  methods: {
    getProcessFromStore(processId) {
      return this.getProcess(1);
    }
  }
};
</script>

and you only have to change your template into

{{ getProcessFromStore(1) }}

That’s is, although it doesn’t makes a lot of sense for not being able to inject directly the variable to the store getter, this is due to the fact of the computed properties are by default getter-only.

发表评论

电子邮件地址不会被公开。 必填项已用*标注