Vuex is a state management mode developed specifically for vue.js applications

  1. Store state responsiveness
  2. You cannot change the state in the store directly. You must change mutation through the only method, commit
//vue.js
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

//index.js

this.$store.commit("increment")


Copy the code

state

A single state tree that can correspond to data in a component

Method of getting state

this.$store.state.count
Copy the code
MapState helper function

MapState is used when a component retrieves multiple states

import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // Arrow functions make code more concise
    count: state= > state.count,

    // Can also be abbreviated as
    count1,

    // Pass the string argument 'count' equal to 'state => state.count'
    countAlias: 'count'.// In order to be able to use 'this' to get local state, you must use regular functions
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}
Copy the code
Object expansion operator
computed: { localComputed () { /* ... */}, // Use the object expansion operator to blend this object into an external object... mapState({ // ... })}Copy the code
Getter

The shared property calculation function, corresponding to computed in the component, takes state as the first argument and the other getter as the second argument

const store = new Vuex.Store({
  state: {
    todos: [{id: 1.text: '... '.done: true },
      { id: 2.text: '... '.done: false}},getters: {
    doneTodos: state= > {
      return state.todos.filter(todo= > todo.done)
    }
  }
})
Copy the code

Obtain attributes obtain methods:

this.$store.getters.doneTodos
Copy the code
MapGetters helper function
import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // Mix getters into a computed object using the object expansion operator. mapGetters([// If you want to use another name is also supported
    // doneCount: 'doneTodosCount'
      'doneTodosCount'.'anotherGetter'.// ...])}}Copy the code

Mutation

The only way to change the state in Vuex’s store is to submit mutation, with state as the first parameter. In addition, mapMutations is an auxiliary function

Payload submission

Pass an additional parameter (payload) to store.mit:

//vuex
mutations: {
  increment (state, n) {
    state.count += n
  }
}


//index
store.commit('increment'.10)

//******* In most cases, objects are passed in

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}



//commit Commit mode 1
store.commit('increment', {
  amount: 10
})



// Submission method 2 suggestion
store.commit({
  type: 'increment'.amount: 10
})

Copy the code

Commit mutation in the component

methods: { ... mapMutations(['increment'.// Map 'this.increment()' to 'this.store.com MIT ('increment')'

      // 'mapMutations' also supports payloads:
      'incrementBy' // Map 'this.incrementBy(amount)' to 'this. codestore.com MIT ('incrementBy', amount)'
    ]),
    ...mapMutations({
      add: 'increment' // Map 'this.add()' to 'this.store.mit ('increment')'})}Copy the code

module

Split the store into modules, each with stat, getter, mutation, and Action

const moduleA={
    state:() = >({}),
    mutation: {},actions: {... },getters: {... }}const moduleB = {
  state: () = >({... }),mutations: {... },actions: {... }}const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})



store.state.a // -> moduleA status
store.state.b // -> moduleB status



Copy the code