1, concept,

Vuex centrally manages the state of all components in an application, with rules to ensure that the state changes in a predictable manner.Copy the code

2, attributes,

This.$store.state: = $store.state; Mutations -- > a function of the updated state, which can be modified by submitting the methods in mutations, such as this. Rows. MIT (' method name '), can only be synchronized, focusing on modifying the state; 3, actions -- > cannot modify state directly, do it by submitting mutation, can include asynchronous operations, distribute action via this.$store.dispatch(' method name ') 4, getters -- > derived from underlying data, 5, modules -- > modules, each with its own state, mutation, action, getter, and even nested submodulesCopy the code

3. Create the JS file under store

// Create the store folder under the project SRC folder, Import Vue from 'Vue' import Vuex from 'Vuex' // Enable Vuex vuue.use (Vuex) // declare the Vuex instance object, Export Default new vuex.store ({state: {state: {counter:0},}, mutations: { add(state) { state.counter++ } }, actions: { add({ commit }) { setTimeout(() => { commit('add') }, 1000); }}, getters: {doubleCounter(state) {return state.counter * 2; }}})Copy the code