vuex 的概念和基礎使用

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

一、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 特性的兩個關鍵字：集中和統一。

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

集中能夠解決多個組件依賴同個狀態的狀況，統一則有利於調試。

二、vuex 什麼時候用

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

三、 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)
});