Vuex method package call

vuex

https://vuex.vuejs.org/zh/guide/mutations.html

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import state from './state'
import mutations from './mutations'

// Plug-in, changes will be recorded and displayed when mutations modify state 
import createLogger from 'vuex / dist / logger'

Vue.use(Vuex)

// The debugging tool in vuex, which is more expensive, only use 
const debug = process.env.NODE_ENV in development ! == 'production'

export default new Vuex.Store({
  actions,
  getters,
  state,
  mutations,
  strict: debug,
  plugins: debug ? [createLogger()] : []
})

state.js defines state variables in vuex

const state = {
  singer: {},
  
}

export default state

getters.js filter wrap state variables

 

// Filter and calculate the attribute 
export const singer = state => state.singer

 

actions.js asynchronously invokes methods in modification mutations

 

export const ran = function ({commit}, {list}) {
  commit(types.SET_SINGER, true)
}

 

mutations-type.js encapsulates method constants in mutations

 

// The constant value of the method used in mutation 
export const SET_SINGER = 'SET_SINGER'

 

mutations.js synchronously modify variables in state

 

// Synchronization method, modify the value of state 
import * as types from './mutation-types'

const mutations = {
  [types.SET_SINGER](state, singer) {
    state.singer = singer
  }
}

export default mutations