vuex 的概念和基礎使用

Donne發表於2018-03-05
Vue

本文只介紹概念的延伸和核心配置，對於vuex 各部分的概念，官方文件已經寫的足夠清晰簡潔。

1、vuex 是什麼

基礎概念

Vue 的狀態管理模式，集中儲存管理應用的所有元件的狀態。

vuex的核心

vuex 是 Flux 架構的一種實現。Flux 的核心是單向流動：
views 層使用者操作 dispatch 觸發 action，action 觸發 motation 對狀態 state 進行修改。

Flux 架構對標 MVC 框架：

views -> store.action      -> mutations  -> state

views -> controller.action -> model      -> database

個人理解

vuex 特性的兩個關鍵字：集中和統一。

  • 集中是指元件共享的狀態集中管理。
  • 統一是指改變狀態使用統一的呼叫。

集中可以解決多個元件依賴同個狀態的情況，統一則有利於除錯。

2、vuex 何時用

如果您不打算開發大型單頁應用，使用 Vuex 可能是繁瑣冗餘的。確實是如此——如果您的應用夠簡單，您最好不要使用 Vuex。一個簡單的 global event bus 就足夠您所需了。但是，如果您需要構建是一箇中大型單頁應用，您很可能會考慮如何更好地在元件外部管理狀態，Vuex 將會成為自然而然的選擇。

3、 vuex 基本配置

以下配置只應用於小型開發中，大型系統需要將各模組分離成不同的檔案分別配置。

安裝

# npm 安裝
npm install vuex --save
# yarn 安裝 
yarn add vuex

使用

新建 store/index.js 檔案，程式碼如下

import Vue from `vue`
import Vuex from `vuex`

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        todos: [
          { id: 1, text: `...`, done: true },
          { id: 2, text: `...`, done: false }
        ]
    },
    mutations: {
       increment (state, payload) {
        state.count += payload.amount
      } 
    },
    actions: {
        
    },
     // 可以理解為 store 的計算屬性
    getters: {
       doneTodos: state => {
          return state.todos.filter(todo => todo.done)
        } 
    }
});

export default store

在 main.js 中引入store

import store from `./store`

new Vue({
  router,
  // 從根例項中注入，該store例項會注入到根元件下的所有子元件中。
  store,
  render: h => h(App)
});

相關文章