How to use vuex to operate state objects-JS Tutorial-php.cn

This time I will show you how to use vuex to operate state objects, and what are theprecautions for using vuex to operate state objects. The following is a practical case, let's take a look.

What is Vuex?

VueX is a state management architecture specially designed for Vue.js applications. It uniformly manages and maintains the changeable state of each vue component (you can understand it as some data in the vue component).

Vue has five core concepts, state, getters, mutations, actions,

modules.

Summary

state => Basic data

getters => Data derived from basic data
mutations => Method to submit changed data ,Synchronize!
actions => Like a decorator, wrapping mutations so that they can be asynchronous.
modules =>
ModularizationVuex

State

state is the basic data in Vuex!

Single state tree

Vuex uses a single state tree, that is, one object contains all state data. As a constructor option, state defines all the basic state parameters we need.

Get the Vuex properties in the Vue component

•We can get the Vuex state through Vue's Computed, as follows:

const store = new Vuex.Store({ state: { count:0 } }) const app = new Vue({ //.. store, computed: { count: function(){ return this.$store.state.count } }, //.. })

Copy after login

Below Take a look at the example code of vuex operating state object

Whenever store.state.count changes, the calculated properties will be re-obtained and the associated DOM will be updated.

The core of every Vuex application is the store (warehouse).

Quote two sentences from the official document to describe vuex:

1, Vuex’s state storage is responsive. When a Vue component reads state from the store, if the state in the store changes, the corresponding component will be efficiently updated accordingly.

2, you cannot directly change the state in the store. The only way to change the state in the store is to explicitly commit a mutation. This allows us to easily track every state change, allowing us to implement some tools to help us better understand our application.

Use the state in vuex

1, introduce store in the root component, then the sub-component can get this through this.$store.state.data name

Global properties

.The project I created using vue-cli, App.vue is the root component

App.vue code

Copy after login

Count.vue code in the component folder

Copy after login

Store.js code

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); const state = { count: 1 } export default new Vuex.Store({ state， })

Copy after login

2, get the global attribute through the mapState auxiliary function

The advantage of this method is that you can use it directly to get the attribute value through the attribute name .

Change the code of Component.vue

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!