vuex 是 vue 的狀態管理器, 就像redux , mobx 是react 的狀態管理器。 其實我覺得vuex 跟react 的 mobx 比較像。 Vuex 比 redux 更容易上手， 安裝也簡單。 然後也不需要middleware 處理非同步Action(saga, thunk)。這裡我不講什麼是狀態管理器, 我在介紹redux那一篇我有討論過了 連結 最後 vuex 是vue 官方的狀態管理器, 所以他會在官方調試工具(devtool)， 方便我們Debug

以下是vuex的流程：

Vuex 的核心

state: 一個管理我們所有應用程式的狀態,
mutations: 更改Vuex的store中的狀態的唯一方法是提交mutation
actions:Action 提交的是mutation，而不是直接變更狀態。
Action 可以包含任意異步操作。
getters: store 中定義“getter”（可以認為是store 的計算屬性)

Demo

• demo:

在我的vue component 裡面我在@click 觸發addTodo action, 然後把this.inputTodo 傳到我的store addTodo action 裡面。

//App.js

...
 <button @click="addTodo">Add Todo</button>
...
addTodo () {
  this.$store.dispatch('addTodo', this.inputTodo)
  this.inputTodo=''
}

// store.js
// 我的state存放我的todo object
export const state = {
  todos: [
    {
      id: 1,
      text: "learn vue"
    },
    {
      id: 2,
      text: "learn css"
    }
  ]
}

//這裡有addTodo, editTodo, deleteTodo mutation， 這些可以改變state的質
export const mutations = {
  addTodo (state, payload) {
    state.todos.push({
      id: state.todos.length+1,
      text: payload
    })
  },
  editTodo (state, payload) {
    payload.todo.text = payload.value
  },
  deleteTodo (state, payload) {
    state.todos.splice(state.todos.indexOf(payload), 1)
  }
}

//這些action 決定要commit 那些 mutation， 還有傳payload（參數）進去
export const actions = {
  addTodo (context, payload) {
    context.commit('addTodo', payload)
  },
  deleteTodo (context, payload) {
    context.commit('deleteTodo', payload)
  },
  editTodo (context, payload) {
    context.commit('editTodo', payload)
  }
}

//這裡是getters 就是算好的質。
export const getters = {
  todos: state => state.todos
}

參考連結

• vue vuex
• 我的vuex todolist