vuex入门例子

vuex example

接着上一篇的vuex简单剖析，接下来主要来写一个简单的例子，来操作一番。

store

/*
vuex最核心的管理对象store
 */
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

/*
相当于data对象的状态对象
 */
const state = {
  count: 0  // 指定初始化数据
}

/*
包含了n个直接更新状态的方法的对象
 */
const mutations = {
  INCREMENT (state) {
    state.count++
  },
  DECREMENT (state) {
    state.count--
  }
}

/*
包含了n个间接更新状态的方法的对象
 */
const actions = {
  // {commit} -> 传了一个对象 ，对象解构
  increment ({commit}) {
    // 提交一个mutation请求
    commit('INCREMENT')
  },
  decrement ({commit}) {
    // 提交一个mutation请求
    commit('DECREMENT')
  },
  incrementIfOdd ({commit, state}) {
    if (state.count % 2 === 1) {
      // 提交一个mutation请求
      commit('INCREMENT')
    }
  },
  incrementAsync ({commit}) {
    setTimeout(() => {
      // 提交一个mutation请求
      commit('INCREMENT')
    }, 1000)
  }
}

/*
包含多个getter计算属性的对象
 */
const getters = {
  // 不需要调用
  evenOrOdd (state) { // 当读取属性值时自动调用并返回属性值
    return state.count % 2 === 0 ? '偶数' : '奇数'
  }
}

export default new Vuex.Store({
  state, // 状态
  mutations, // 包含多个更新state fn
  actions, // 包含多个时间回调函数
  getters // 包含多个 compute getter
})

这篇article just 记录一下