vue-vuex状态管理-1

 

export default vuex.Store{
　　State, //数据库。
　　getters,// 是我们从数据库里取数据的 API，getters 得是一个”纯函数“
　　actions,//处理数据
　　Mutations, //把数据存入数据库的 API，用来修改state 的。
}

getters:

// 获取控制变量 ctrl
export function getShowPage (state) {
  return state.ctrl.showPage
}


//获取store各项信息
export function getMeta (state) {
  return state.meta
}

mutations:

// 公共控制变量 ctrl
  [SHOW_PAGE] (state) {
    state.ctrl.showPage = true
  },

//Mutation除了接收state 作为第一个参数外，还可以接收其他的参数
[NEW_DATA] (state, payload, id){
    const newData = {id, data: payload}
    state.meta = Object.assign({}, {currentData: id})
    state.datas = Object.assign({}, newData)
  },

store与state

Store中至少要注入两项，state 和 mutation。

const state = {//state就是根据你项目的需求，自己定义一个数据结构
  currentPage: 1,
  user: '0121213',
  change: 0,
  page,
  ctrl,
  meta,
  configs,
  datas
}

export default new Vuex.Store({
  state,
  mutations,
})

action

export const updateName = function({ dispatch, state }, name) {
  const payload = {name}
  dispatch('UPDATE_PAGE', payload)//通过mutation（update_page）存储
}

1

var store = {//所有 store 中 state 的改变，都放置在 store 自身的 action 中去管理
  debug: true,
  state: {
    message: 'Hello!'
  },
  setMessageAction (newValue) {
    if (this.debug) console.log('setMessageAction triggered with', newValue)
    this.state.message = newValue
  },
  clearMessageAction () {
    if (this.debug) console.log('clearMessageAction triggered')
    this.state.message = ''
  }
}

var vmA = new Vue({
  data: {
    privateState: {},//每个组件可以有自己的state
    sharedState: store.state
  }
})