Vuex 2.0 Introduction – Read the Notes of Vuex 2.0 English documents

Vuex uses a single state tree, where a single store object stores the state of the entire application layer. It makes it easier to locate a specific state and take a snapshot of the entire current application when debugging.

• Let’s set the stage. The single State tree used by Vuex does not conflict with modularity. The question is, how do you divide state and mutation into submodules?
• To use store, you must firstVue.user(Vuex)And then storeconst store = new Vuex.store()Inject is defined in Vue instance APPnew Vue({store}), the implementation is injected from the root component into all child components and can then be used in child componentsthis.$storeThe call.
• When a component needs to use multiple store state properties or getters, it can use a shared helpermapState, it will return an object.

it('helper: mapState (object)', () => { const store = new Vuex.Store({ state: { a: 1 }, getters: { b: () => 2 } }) const vm = new Vue({ store, computed: MapState ({// in mapState we can call store state and store getters a: (state, getters) => { return state.a + getters.b } }) }) expect(vm.a).toBe(3) store.state.a++ expect(vm.a).toBe(4) })Copy the code

So how do you use it with local computed properties? Typically, we use a tool that combines multiple objects into one and passes the resulting object to computed. But here we can do this super succinctly using the Object spread operator, the object extension operator, directly from ES6’s Stage 3.

Computed: {localComputed () {} // merge its attributes with localComputed attributes... mapState({ message: state => state.obj.message }) }Copy the code

The only way to change the state in the Vuex Store is to commit a mutation change. Mutation is similar to events: both have string types and handler handles. We actually modify state in handler, where state is the first parameter of each mutation.

const store = new Vuex.Store({ state: { count: 1 }, mutations: Increment (state) {// mutate state state.count++}}}) Handler store.com MIT ('increment') can only be called when using type increment to call mutationCopy the code

The second optional parameter of commit is payload, which can be a normal type, object type, and so on. The commit method can also be called as an object, in which case the object is treated as payload.

store.commit({
  type: 'increment',
  amount: 10
  })Copy the code

• little tips

• It is recommended that you use uppercase Mutation to store all uppercase variables in a file and introduce them as needed. Use constants as method names using es6’s new computed attribute names feature.

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'Copy the code

// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'
const store = new Vuex.Store({
  state: { ... },
  mutations: {
    // we can use the ES2015 computed property name feature
    // to use a constant as the function name
    [SOME_MUTATION] (state) {
      // mutate state
    }
  }
  })Copy the code

Es6 evaluates the attribute name

/ / um participant: variables that contain Spaces as the attribute name complains, at this point it can be deposited as a string or the brackets package exists in var lastName = "last name"; Var person = {"first name": "Nicholas", // "lastName ": "Zakas"}; console.log(person["last name"]); // ZakasCopy the code

• Mutations must all be synchronous, and its changes must be implemented immediately after it is called because it is the only one that can modify state. If it uses an asynchronous method, it will make our state untraceable, making it difficult to locate the problem
• This. codestore.mit () can be used for commit mutation in a component, or the mapMutations method can be used, which maps methods in the component to a store.mit call (requiring store injection in the root component).

import { mapMutations } from 'vuex' export default { // ... Methods: {// Pass in an array... MapMutations ([' increments' // map this.increment() to this.code.store.mit (' increments ')]), mapMutations({ add: 'increment' // map this.add() to this.$store.commit('increment') }) } }Copy the code

Because Vuex uses a single-state tree, the Store grew as our app grew. To combat this, Vuex allows us to split the store into modules. Each module has its own state, mutations, actions, getters, and even nested modules. Such as:

const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { a: moduleA, b: ModuleB}}) // Note that multiple modules are in the state object when called, A // -> moduleA's state Store.state. b // -> moduleB's stateCopy the code

• Modules state, local, or root?
  • Mutations and getters, the first argument accepted is the local state of modules

const moduleA = {
  state: { count: 0 },
  mutations: {
    increment: (state) {
      // state is the local module state
      state.count++
    }
  },
  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  }
  }Copy the code

• Similarly, in actions,context.stateIs the local state, andcontext.rootStateFor the root state

const moduleA = {
  // ...
  actions: {
    incrementIfOdd ({ state, commit }) {
      if (state.count % 2 === 1) {
        commit('increment')
      }
    }
  }
  }Copy the code

• The third argument to getters is the root state

const moduleA = {
  // ...
  getters: {
    sumWithRootCount (state, getters, rootState) {
      return state.count + rootState.count
    }
  }
  }Copy the code