一、介紹Vuex

Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化，適合于構(gòu)建中大型單頁(yè)應(yīng)用。

創(chuàng)新互聯(lián)建站專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、府谷網(wǎng)絡(luò)推廣、小程序開(kāi)發(fā)、府谷網(wǎng)絡(luò)營(yíng)銷、府谷企業(yè)策劃、府谷品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)建站為所有大學(xué)生創(chuàng)業(yè)者提供府谷建站搭建服務(wù)，24小時(shí)服務(wù)熱線：028-86922220，官方網(wǎng)址：www.cdcxhl.com

1、什么是狀態(tài)管理模式？

看個(gè)簡(jiǎn)單的例子：

  
  
  
  
  
Count is {{ counterValue }}
  

    Increment +1
    Decrement -1
  

代碼中標(biāo)識(shí)了：

1、state，驅(qū)動(dòng)應(yīng)用的數(shù)據(jù)源；
2、view，映射到視圖的數(shù)據(jù)counterValue；
3、actions，響應(yīng)在view上的用戶輸入導(dǎo)致的狀態(tài)變化。

用簡(jiǎn)單示意圖表示他們之間的關(guān)系：

我們知道，中大型的應(yīng)用一般會(huì)遇到多個(gè)組件共享同一狀態(tài)的情況：

1、多個(gè)視圖依賴于同一狀態(tài)

2、來(lái)自不同視圖的行為需要變更同一狀態(tài)

于是需要把組件的共享狀態(tài)抽取出來(lái)，以一個(gè)全局單例模式管理，另外，需要定義和隔離狀態(tài)管理中的各種概念并強(qiáng)制遵守一定的規(guī)則。

這就是 Vuex 背后的基本思想，借鑒了 Flux、Redux、和 The Elm Architecture。與其他模式不同的是，Vuex 是專門為 Vue.js 設(shè)計(jì)的狀態(tài)管理庫(kù)，以利用 Vue.js 的細(xì)粒度數(shù)據(jù)響應(yīng)機(jī)制來(lái)進(jìn)行高效的狀態(tài)更新。

2、Vuex的核心概念

1、State: 單一狀態(tài)樹(shù)，用一個(gè)對(duì)象包含了全部的應(yīng)用層級(jí)狀態(tài)，作為一個(gè)『唯一數(shù)據(jù)源(SSOT)』而存在，每個(gè)應(yīng)用將僅僅包含一個(gè) store 實(shí)例。

2、Getters: Vuex 允許我們?cè)?store 中定義『getters』（可以認(rèn)為是 store 的計(jì)算屬性）。

3、Mutations: Vuex 中的 mutations 非常類似于事件：每個(gè) mutation 都有一個(gè)字符串的 事件類型 (type) 和 一個(gè) 回調(diào)函數(shù) (handler)。這個(gè)回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方，并且它會(huì)接受 state 作為第一個(gè)參數(shù)。

4、Actions: 類似于 mutation，不同在于：①Action 提交的是 mutation，而不是直接變更狀態(tài)；②Action 可以包含任意異步操作。

5、Modules: 為解決單一狀態(tài)樹(shù)導(dǎo)致應(yīng)用的所有狀態(tài)集中在一個(gè)store對(duì)象的臃腫問(wèn)題，Vuex將store分割到模塊（module）。每個(gè)模塊擁有自己的 state、mutation、action、getters、甚至是嵌套子模塊——從上至下進(jìn)行類似的分割。

接著我們開(kāi)始構(gòu)建備忘錄應(yīng)用，在以下構(gòu)建過(guò)程的介紹中，再加深理解上述概念。

二、環(huán)境安裝

1.安裝 vue-cli

2.初始化應(yīng)用

vue init webpack vue-notes-demo
cd vue-notes-demo
npm install // 安裝依賴包
npm run dev // 啟動(dòng)服務(wù)

結(jié)果為：

目錄結(jié)構(gòu)為：

三、功能模塊

先看下我們要做的demo的效果為：

主要功能模塊為：

• 新增計(jì)劃，新增一個(gè)計(jì)劃，編輯區(qū)顯示空的計(jì)劃內(nèi)容。

• 移除計(jì)劃，刪除一個(gè)計(jì)劃之后，計(jì)劃列表少了該計(jì)劃。

• 所有計(jì)劃的總時(shí)長(zhǎng)，將所有的計(jì)劃時(shí)間加起來(lái)。

四、項(xiàng)目組件劃分

在原來(lái)的目錄結(jié)構(gòu)的調(diào)整下，最終的目錄結(jié)構(gòu)為：

下面詳細(xì)介紹下：

1、組件部分

1.首頁(yè)組件：Home.vue

2.計(jì)算計(jì)劃總時(shí)長(zhǎng)組件：Sidebar.vue

 View Code

3.計(jì)劃列表組件：TimeEntries.vue

 View Code

4.新增計(jì)劃組件：LogTime.vue

 View Code

2、vuex中用來(lái)存儲(chǔ)數(shù)據(jù)的劃分為：

1.初始化vuex.Store: index.js

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './actions'

Vue.use(Vuex);

const state = {
  totalTime: 0,
  list: []
};

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

State: 單一狀態(tài)樹(shù)，用一個(gè)state對(duì)象包含了全部的應(yīng)用層級(jí)狀態(tài)，代碼中只new 了一次store實(shí)例 Vuex.Store。

2.負(fù)責(zé)觸發(fā)事件和傳入?yún)?shù)：actions.js

 View Code

實(shí)踐中，我們會(huì)經(jīng)常會(huì)用到 ES2015 的 參數(shù)解構(gòu) 來(lái)簡(jiǎn)化代碼（特別是我們需要調(diào)用 commit 很多次的時(shí)候）：

actions: {
  increment ({ commit }) {
    commit('increment')
  }
}

3.注冊(cè)各種數(shù)據(jù)變化的方法: mutations.js

 View Code

使用常量替代 mutation 事件類型在各種 Flux 實(shí)現(xiàn)中是很常見(jiàn)的模式。這樣可以使 linter 之類的工具發(fā)揮作用，同時(shí)把這些常量放在單獨(dú)的文件中可以讓你的代碼合作者對(duì)整個(gè) app 包含的 mutation 一目了然：

// mutation-types.js 
export const SOME_MUTATION = 'SOME_MUTATION'

mutations: {
    // 我們可以使用 ES2015 風(fēng)格的計(jì)算屬性命名功能來(lái)使用一個(gè)常量作為函數(shù)名
    [SOME_MUTATION] (state) {
      // mutate state
    }
  }

4.記錄所有的事件名: mutation-types.js

 View Code

配合上面常量替代 mutation 事件類型的使用

3、初始化部分

入口文件渲染的模版index.html比較簡(jiǎn)單：