Easy to get to know one article Vuex

concept:

Vuex is a specially developed for Vue.js application state management (official website address: https: //vuex.vuejs.org/zh/). It uses the status of all components centralized storage management application, and a corresponding state rules to ensure a predictable manner changed.

 

We replaced a large vernacular: Vuex is a state management mode, you can simply understood as a global object, then we can modify the properties of this global object inside or add methods, but we can not kind of like a traditional form of direct assignment of JS to modify, we have to follow the rules Vuex provides us to modify;

 

There is Vuex is applied to solve the problem between the traditional values ​​of the various components, it means watching our traditional welfare vue father and components as well as the shortcomings of the traditional values ​​trouble brought us; this is the official website said very clearly:

  

 

Tip: This module will be used in the form of import and export vuex, this paper a little bit long, patiently watching the hope, of course, able to do so again knock followed would be better!

Vuex provides us with a total of four objects, namely state, mutations, getters, actions;

state: Vuex data source, public data we need to store all this, can be simply understood as a transparent warehouse, you can access the repository data sources through this $ store.state variable name;..

mutations: mutations key to this is the equivalent of the warehouse, only the modified data source to operate through the submission of mutations, which means you want to change the data inside the warehouse only be modified (this by mutations $ store.commit ( “method. name”));

getters: vue property getters computed in similar, getters return value will be modified according to changes in state of the state value depends, if the value of the state-dependent getters are not changed, the cache is read directly, if there is changes in corresponding changes will occur here, it can be used to monitor changes in the value of the state; getters here can be understood as a state of security of the warehouse, if the state of the data changes, this will take appropriate security measures to make the appropriate changes, if there is no change, then nothing had happened continued to be mixed with food to die (ha ha ha, I do not know exactly inappropriate analogy, but this is the meaning, you understand just fine, do not bar fine)

actions: actions and mutations very similar, but mutations can only synchronize the official, but there are actions you can perform asynchronous operations; that is to say we need to do asynchronous operations need to be in actions, and then submit that actions are mutations instead of directly modifying the state, that is into this warehouse modify data, can be modified to go to get the key, so the actions are submitted to the mutations go method of execution mutations;

 

 

state of usage:

First, we create a new project, we build vue environment here is not to go into details, after all, this article is about the vuex of; vuex be installed in the project:

Installation vuex command: npm install vuex –save

After installing vuex we create a new folder vuex in the src directory, and create a new file in vuex store.js folder:

    store.js:  

import Vue from 'vue';
import Vuex from 'vuex';


Vue.use(Vuex);
const state={
  number:1
}

export default new Vuex.Store({
  state,
})

 

Then we quote store.js in main.js in and add store the object when the object is instantiated

    main.js  

import Vue from 'vue'
import App from './App'
import router from './router'
//

Reference store.js

import store from './vuex/store' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, //

Instantiated object is added to store

store, components: { App }, template: '' })

Then modify our App.vue file

  App.vue





 

 

 

We can see by the above code, we joined a p tag App.vue in, vuex states: If we need to read the data in vuex, which is state of the source data warehouse, we must pass this $ store.state The variable name to access

 

mutations usage:

If we need to modify the data source in vuex, we can modify it by submitting mutations;

First we need to add a button in our view layer to control:

    App.js






    

 

Then modify our store.js:

import Vue from 'vue';
import Vuex from 'vuex';


Vue.use(Vuex);
const state={
  number:1
}

//

Adding mutations objects, state parameters can get to the top of the state

const mutations={ addFunction(state){ return state.number+=1; } } //

Here we must remember to be added to instances, or will be error

export default new Vuex.Store({ state, mutations })

 

We can directly observe, to submit mutations modify the data source by this. $ Store.commit ( ‘method name’), of course, also possible mutations our reception parameters, the first parameter is the name of a method of mutations, a second parameters for the mutations needed to receive the parameters, so that our mutations become more flexible;

 

getters usage:

getters similar to computer usage vue, you can monitor the source data changes state data warehouse, if getters dependent state data has changed, getters dependent data has changed state will change

First we can add the following code in store.js:

import Vue from 'vue';
import Vuex from 'vuex';


Vue.use(Vuex);
const state={
  number:1
}

const getters={
    //

State is triggered by the process state above objects, the state value can be read

addFunction(state){ return state.number++; } } export default new Vuex.Store({ state, //

Here we must remember to join object instantiation

getters })

 

App.vue of view we can change:

  





 

Through the above code, and view layers we can clearly see that when we operate the getters and getters triggered the addFunction method, addFunction method changes the value state.number, this time has a value number is 2, so the page 2 is displayed on, because + in the post, so at this time is 1 getters, i.e. when the variation value dependent getters state.number occurring in the getters, state.number will change, If state.number not changed, this time getters will give priority to read cache;

 

Usage of actions:

Actions object mainly performs asynchronous operations, similar to mutations, except that actions make changes to data by submitting mutations, not directly changing the data state;

First, we can change the code store.js in:

    

import Vue from 'vue';
import Vuex from 'vuex';


Vue.use(Vuex);
const state={
  number:1
}
const mutations={
  addFunction(state){
    return state.number++;
  }
}
const getters={
  addFunction(state){
    return state.number++;
  }
}
//

context is an object store having the same properties and methods of Examples

const actions={ addFunction(context){ context.commit("addFunction"); } } export default new Vuex.Store({ state, mutations, getters, //

Remember to instantiate here in time to add

actions })

 

App.vue modified code is:

  





 

 

 

 

 

 

Scenarios for vuex:

In project development, there may be a lot of data or parameters that we may need to read or modify many times, like a similar function cart, etc., at this time we can use vuex be achieved; after all, just a vuex state management, state management our model is to provide a convenient, but not necessary, because the state management can do can also be achieved by other means and methods. In fact, personally I feel vuex with localStorange somewhat similar, are used to store and modify data, in order to solve cross-page data loss;

 

Leave a comment