Inject store into the global vue object, accessed through this.$store.state

new Vue({
  el: '#app'.// Provide the store object to the "store" option, which injects store instances into all child components
  store,
  template: ` 
      
 
        
      
 `
})
Copy the code

State

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

    // 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
    }
 })
 // The name of the calculated property is the same as the child node name of state. mapState([// Map this.count to store.state.count
  'count'])}Copy the code

Getters

mapGetters
getters: {
  // Attribute access
  doneTodosCount: (state, getters) = > {
    return getters.doneTodos.length
  },
  // Method access
  getTodoById: (state) = > (id) = > {
    return state.todos.find(todo= > todo.id === id)
  }
}

// Method access
this.$store.getters.getTodoById(2)

computed: {
  ...mapGetters([
    'doneTodosCount'
  ])
  ...mapGetters({
    / / the ` enclosing doneCount ` mapping for ` enclosing $store. Getters. DoneTodosCount `
    doneCount: 'doneTodosCount'
  })
  // Attribute access
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}
Copy the code

Mutations

mapMutations
// The entire app contains mutation at a glance
export const SOME_MUTATION = 'SOME_MUTATION'

import { SOME_MUTATION } from './mutation-types'
mutations: {
   increment (state, payload) {
     state.count += payload.amount
   },
   [SOME_MUTATION] (state) {
      // mutate state}}computed: {
  ...mapMutations(['increment']) // Map 'this.increment()' to 'this.store.com MIT ('increment')'. mapMutations({add: 'increment' // Map 'this.add()' to 'this.store.mit ('increment')'
  })

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

Actions

mapActionsDistribution of mutation
actions: {
    // Accept a context object with the same methods and properties as the store instance, so you can commit a mutation by calling context.mit
  checkout ({ commit, state }, products) {
    // Back up the contents of the current shopping cart
    const savedCartItems = [...state.cart.added]
    // Issue a checkout request and optimistically empty the cart
    commit(types.CHECKOUT_REQUEST)
    // The shopping API accepts a success callback and a failure callback
    shop.buyProducts(
      products,
      // Successful operation
      () = > commit(types.CHECKOUT_SUCCESS),
      // Failed operation
      () = > commit(types.CHECKOUT_FAILURE, savedCartItems)
    )
  }
}

this.$store.dispatch('checkout', { amount: 10 })
Copy the code

Modules

// namespaced: true All getters, actions, and mutations are automatically named based on the path registered by the module

// root: true
dispatch('someOtherAction'.null, { root: true }) // -> 'someOtherAction'
dispatch('someOtherAction') // -> 'foo/someOtherAction'

foo: {
  namespaced: true.actions: {
    someAction: {
      root: true,
      handler (namespacedContext, payload) { ... } // -> 'someAction'}}}Copy the code
const moduleA = {
  state: () = >({... }),mutations: {... },actions: {... },getters: {... }}const moduleB = {
  namespaced: true.state: () = >({... }),getters: {
    popular () { ... } // -> store.getters['b/popular']
  }        
  mutations: {... },actions: {
    incrementIfOddOnRootSum ({ state, commit, rootState }) {
      if ((state.count + rootState.count) % 2= = =1) {
        commit('increment')}}}}const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

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

/ / short. mapActions(['some/nested/module/foo'.// -> this['some/nested/module/foo']()
  'some/nested/module/bar' // -> this['some/nested/module/bar']()
])

...mapState('some/nested/module', {
  a: state= > state.a,
  b: state= > state.b
})

const { mapState, mapActions } = createNamespacedHelpers('some/nested/module')
Copy the code