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' // 插件,mutations修改state时会记录并显示修改日志 import createLogger from 'vuex/dist/logger' Vue.use(Vuex) // vuex中的调试工具,比较费性能,只在开发中使用 const debug = process.env.NODE_ENV !== 'production' export default new Vuex.Store({ actions, getters, state, mutations, strict: debug, plugins: debug ? [createLogger()] : [] })
state.js 定义vuex中状态变量
const state = { singer: {}, } export default state
getters.js 过滤包装state变量
// 过滤并计算属性 export const singer = state => state.singer
actions.js 异步调用修改mutations中的方法
export const ran = function ({commit}, {list}) { commit(types.SET_SINGER, true) }
mutations-type.js 封装mutations中的方法常量
// mutation 里用到的方法常量值 export const SET_SINGER = 'SET_SINGER'
mutations.js同步修改state中的变量
// 同步方法,修改state的值 import * as types from './mutation-types' const mutations = { [types.SET_SINGER](state, singer) { state.singer = singer } } export default mutations