Shulou(Shulou.com)06/03 Report--

How to quickly apply vuex in vue, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain for you in detail, people with this need can come to learn, I hope you can gain something.

Vuex.js

Status (data) management

In vue, it's messy when we manage data. We need to use the following library, vuex.js.

Vuex introduction

The core of every Vuex application is store, which is used to store data.

"store" is basically a container that contains most of the state in your application. Vuex differs from a simple global object in the following two points

The state storage of 1.Vuex is responsive

two。 You can't directly change the state in store.

Vuex has six concepts.

Store (the most basic concept) (create a library)

State (data)

Getters (it can be said to be a computational property)

Mutations

Actions

Modules

Let's see how to create a creation library.

Store is used to store data (state)

New Vuex.Store ({})

We put the data in state.

State: {}

Let's see how to read the data inside.

Store.state. data

Next, let's see how to modify the data.

Mutations: {}

How do we adjust the mutations data?

Call with the commit () method

Next, let's do a small effect to see how vuex is used in vue.

We make the effect of adding and subtracting buttons on a shopping cart.

Running effect

Var store = new Vuex.Store ({state: {count:0}, mutations: {jia (state) {state.count++}, jian (state) {state.count--}) Var vm = new Vue ({el: "# app", template: "# tpl", components: {tip: {template: "{{$store.state.count}"}}, but: {template: ``}}, store})

The data we get from store is best put in the calculation attribute.

When a component needs to acquire multiple states, declaring these states as computational properties can be repetitive and redundant. To solve this problem, we can use the mapState helper function to help us generate computational properties

Let's do a small effect (note: the calculation property of the annotation is the same as the following two results using the mapState helper function)

When the name of the mapped evaluation attribute is the same as the child node name of state, we can also pass an array of strings to mapState.

Running effect

/ / the data we obtained from store had better be put in the calculation attribute var store = new Vuex.Store ({state: {count:0, num1:1, num2:2}, mutations: {jia (state) {state.count++}, jian (state) {state.count--})) Var vm = new Vue ({el: "# app", template: "# tpl", components: {tip: {/ / create calculation attribute / / computed: {/ / count () {/ / return this.$store.state.count; / /}, / / num1 () {/ / return this.$store.state.num1 / /}, / / num2 () {/ return this.$store.state.num2 / / use the mapState helper function / / computed:Vuex.mapState ({/ / count:state= > state.count, / / num1:state= > state.num1, / / num2:state= > state.num2 / /}), and / / mapState pass a string array computed:Vuex.mapState (['count',' num1') 'num2']), template: "{{count}} {{num1}} {{num2}"}, but: {template: ``}}, store}) Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

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.