Vuex (a): State and Mutation

Vuex (a): State and Mutation

The official explanation: Vuex is a specially developed for Vue.js application state management.

It uses the status of all components centralized storage management application, and a corresponding state rules to ensure a predictable manner changed.

Personal understanding: Vuex the variable needs to be shared among all of the components are stored in an object, and then put the object in the top-level assemblies for use by other components, so that needs to be shared variable is to achieve unified management and responsive effect.

 

[Vuex installation process]

• Run npm install vuex --save After New vuecli project
• In the src folder store under the new folder, rename generally not fixed naming store (warehouse)
• New index.js in the store folder
• In mian.js file import store that is introduced index.js

   1 import Vue from 'vue'
   2 import App from './App'
   3 import store from './store'
   4 
   5 Vue.config.productionTip = false
   6 
   7 /* eslint-disable no-new */
   8 new Vue({
   9   el: '#app',
  10   store,
  11   render: h => h(App)
  12 })

• Initialization index.js

  Vue from Import 'VUE' 
  Import from Vuex 'vuex' // Plug Vue.use (Vuex) // create Vuex objects, generally designated Store 
  const = Store new new Vuex.Store ({
     // state: storing state variable   state : {},
     // mutations: mutations is the only way to update the status store, to modify the internal state of the method definition, this $ store.commit ( 'method name', optional parameters) call.   mutations: {},
     // getters: derivative states, similar to the calculation of computed attribute, $ store.getters property name call.   getters: {},
     // Actions: similar mutations, but supports asynchronous operation, $ store.dispatch ( 'method name', optional) call   Actions: {},
     // modules: sub module store, the contents store the equivalent of one example of the former plus the sub-module call.   modules:} { 
  }) //
  
  
  
  
  
  
  
  
  
  
  
  Export Store 
  Export default Store

  Thus far vuex initial completion, subsequent use store objects in the $ store files .vue

   

【state】

   state for storing state variables

　App.vue access state variables in

< H2 > ---------- directly access the App state variables ---------- </ H2 > 
< H2 > {{}} $ store.state.counter </ h2 >

  Sub-assemblies to access state variables in

<h2>{{$store.state.counter}}</h2>

  All state variables must be modified by the method defined mutations

 

【mutations】

  mutations is the only way to update store status, internal method to modify the definition of the state, this. $ store.commit ( 'method name', optional parameters) call

• Without pass parameters

  // VUE file calling method mutations methods of using the commit 
  methods: { 
      Addition () { 
        the this . Store.commit $ ( 'AddOne' ) 
      }, 
      subtraction () { 
        the this . Store.commit $ ( 'SubOne' ) 
      } 
    }

  // first parameter mutations in the method is necessarily state, in order to modify the value of state variables 
  mutations: { 
      AddOne (state) { 
        state.counter ++ 
      }, 
      SubOne (state) { 
        state.counter - 
      } 
    }

   

• Case pass parameters

  // was passed in the method name is placed after the commit brackets 
  Methods: { 
      addCount (Counts) { 
        the this . Store.commit $ ( 'incrementCount' , Counts) 
      } 
    }

  // called normally the mutations 
  mutations: { 
      incrementCount (State, Counts) { 
        state.counter + = Counts 
      } 
    },

  Object parameters may also be passed

  // parameter passing (Object) 
  addStudent () { 
     const STU = {ID: 115, name: 'Jack', Age: 31 is } 
     T His . Store.commit $ ( 'addStudent' , STU) 
  } 
  
  // receiving 
  addStudent (state , STU) { 
     tate.students.push (STU) 
  }