Vuex project directory and configuration Introduction

This time to bring you Vuex project directory and configuration introduction, the use of Vuex project directory and configuration introduction of the notes, the following is the actual case, together to see.

Vuex rules to follow:

The state of the application hierarchy should be concentrated in a single Store object.

Second, committing mutation is the only way to change the state, and the process is synchronous.

The asynchronous logic should be encapsulated inside the action.

File directory structure

The relationship between files:

Store Folder-a series of files for storing Vuex

Store.js-Introduces Vuex, sets state status data, introduces getter, mutation, and action

Getter.js-Get the status in store

Mutation.js-Change the storage place of functions used in the store state

Action.js-commits the mutation to make a tactful modification of state states, which can be manipulated asynchronously

A simple and common notation

Store.js file:

Import vue from ' Vue ' import Vuex from ' Vuex ' import actions from './actions ' import mutations from './mutations ' Vue.use (Vuex Const STATE = {A: ' initial value ', B: ' Balabala ... '}export default new Vuex.store ({State  ,  actions,  mutations})

Main.js file (from the root component into the store, just as you would inject router):

By registering the store option in the root instance, the store instance is injected into all the subcomponents under the root component, and the child component can pass this. $store access.

Import store from './store/index ' new Vue ({el: ' #app ', router, store, ...})

Getter.js Simple configuration (store's computed attribute, accept state as parameter)

Export Default {  donetodos:state = >{   return state.todos.filter (todo = >todo.done)  }}

Get (inside of a component's computed properties):

Computed: {donetodoscount () {   return this. $store. Getters.donetodoscount  }}

Simple configuration of the Getter property of the can-pass parameter

Export default{Gettodobyid: (state) = = (id) + {   return state.todos.find (todo = Todo.id = = = id)  }}

Get (inside of a component's computed properties):

Computed: {Gettodobyid () {   return this. $store. Getters.gettodobyid (' parameter ')}}

Mutation.js Simple configuration:

Export Default {  increment (state) {   //Change status   state.count++  }}

Trigger (in component)

this. $store. Commit (State,payload) actions.js simple configuration: Export default{Action (context) {//Asynchronous Operation  SetTimeout (() =>{   //Change status   context.commit (' Mutationfunname ', Value)}}  }

Trigger (component's)

this. $store. Dispatch (' Mutationfunctionname ') 2018-04-07 18:13:34

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

PHP iterator interface iterator how to use

PHP Unzip the contents of the ZIP archive to the specified directory step