Detailed explanation of Getter usage in vuex

Preface

Vuex allows us to define "getters" in the store (which can be thought of as computed properties of the store). Just like computed properties, the return value of a getter is cached based on its dependencies and is only recomputed if the values ​​of its dependencies change.

Take the example of the official website as an example. The official website code is as follows:

Use the following code to access it in the component:

this.$store.getters.doneTodosCount

1. Description

The accessor function in getters will pass two parameters (state, getters) by default. The first parameter state can be used to access the data, and the getters parameter can be used to access other accessor functions in the accessor. In most cases, only the first parameter is needed. When defining an accessor function, just write the first parameter, as in the example above. When accessing these accessor properties, they are called just like computed properties in the component, rather than like function calls.

This is an example of using the second parameter getters. Use the following code directly in the component to call it, just like calling a calculated property. The second parameter will be passed by default.

this.$store.getters.doneTodos

2. Getter returns a function

Passing parameters to the getter is accomplished by having the getter return a function. Therefore, its main function is to pass parameters.

When this.$store.getters.getTodoById is accessed directly in a component, a function is returned. Then pass the parameters into the function by calling it, and you will get the result of the function.

3. Expand using mapGetters object

In the component's calculated properties, you can directly use the following method to easily reference the getter property, and then use it just like calling a normal calculated property.

If you want to give a getter property a different name, use the object form:

These knowledge points may be difficult to understand by just reading the documents, but they can be easily digested and understood by manual practice.

Vuex getter parameter passing method

getters: {
    getProductByid: (state) => (id) =>
    {
        return state.productList.find(item => item.id === id);
    }
}

When calling using namespace:

this.$store.getters['yournamespace/getProductByid'](id);

Calling without namespace:

this.$store.getters.getProductByid(id);

Summarize

This is the end of this article about the usage of Getter in vuex. For more relevant Vuex Getter usage content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!