Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of how to use Getter in vuex, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this article on how to use Getter in vuex. Let's take a look at it.

Preface

Vuex allows us to define "getter" in store (which can be thought of as a computational property of store). Just like calculating properties, the return value of getter is cached based on its dependency and is recalculated only if its dependency value changes.

Take the official website as an example, the official website code is as follows:

Use the following code access in the component:

This.$store.getters.doneTodosCount

I. explanation

The accessor function in getters passes 2 parameters (state, getters) by default, the first parameter state can access the data, and the getters parameter can access other accessor functions in the accessor. In most cases, you only need to use the first parameter, and define the accessor function to write only the first parameter, as in the example above. When accessing these accessor properties, they are called as if they were calculated properties in the component, not like function calls.

This is an example of the use of the second parameter, getters, which is called directly in the component using the following code, just as the calculation property is called. The second parameter is passed by default.

This.$store.getters.doneTodos

2. Getter returns a function

Passing parameters to getter is achieved by letting getter return a function. Therefore, its main function is to transfer parameters.

When accessing this.$store.getters.getTodoById directly in a component, a function is returned. Then pass the parameters in the way of function call, and get the result of the function.

Third, use mapGetters object to expand

In the evaluation properties of a component, you can easily refer to the getter property in the following way, and then use it just like calling a normal calculation property.

If you want to give a getter attribute another name, use the object form:

These knowledge points, just looking at the document is sometimes difficult to understand, manual practice, it will be easy to digest and understand.

Vuex getter parameter transfer method getters: {getProductByid: (state) = > (id) = > {return state.productList.find (item = > item.id = id);}}

When namespace is used, call:

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

Called without using namespace:

This.$store.getters.getProductByid (id); this is the end of the article on "how to use Getter in vuex". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to use Getter in vuex". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.