Vue (Vuex)中 store 基本用法

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

  state: {

    //这里放全局参数

  },

  mutations: {

    //这里是set方法

  },

 getters: {        //这里是get方法,并且每次打开浏览器优先执行该方法，获取所有的状态   },

  actions: {

    // 处理state的方法体

  },

  modules: {

//这里是我自己理解的是为了给全局变量分组，所以需要写提前声明其他store文件，然后引入这里

  }

})

    onAddRow (data) {
      const initVal = data.map((val, idx) => {
        return {
          colGrid: { span: val },
          isCustom: 'btn-addCol'
        }
      })
      this.addRow(initVal)
    },

  addRow ({ commit, state }, reload) {
    let { layoutSections } = state
    let _idx = layoutSections.length
    let _newLaypout = [...layoutSections, reload]
    // 调用set方法，set全局的state
    commit(types.UPDATE_LAYOUT_SECTIONS, _newLaypout)
    commit(types.UPDATE_ACTIVE_SECTION, _idx)
    commit(types.UPDATE_ACTIVE_PROP, '')
  },

function registerAction (store, type, handler, local) {
  const entry = store._actions[type] || (store._actions[type] = []);
  entry.push(function wrappedActionHandler (payload, cb) {
    // 这里就是主要的参数，我们如果想要使用，就可以在{}里声明它
    let res = handler.call(store, {
      dispatch: local.dispatch,
      commit: local.commit,
      getters: local.getters,
      state: local.state,
      rootGetters: store.getters,
      rootState: store.state
    }, payload, cb);
    if (!isPromise(res)) {
      res = Promise.resolve(res);
    }
    if (store._devtoolHook) {
      return res.catch(err => {
        store._devtoolHook.emit('vuex:error', err);
        throw err
      })
    } else {
      return res
    }
  });
}

this.$store.commit('setDemoValue', value);    

  [types.UPDATE_LAYOUT_SECTIONS] (state, load) {
    state.layoutSections = load
  },
  [types.UPDATE_ACTIVE_SECTION] (state, load) {
    state.activeSection = load
  },
  [types.UPDATE_ACTIVE_PROP] (state, load) {
    state.activeProp = load
  },

activeRow (state) {
    debugger
    let { layoutSections, activeSection } = state
    return layoutSections[activeSection] || []
  }