溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化，適合于構(gòu)建中大型單頁應(yīng)用。
看個(gè)簡(jiǎn)單的例子：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Vuex Demo 01</title><script src="http://cdn.bootcss.com/vue/1.0.26/vue.min.js"></script><script src="http://cdn.bootcss.com/vuex/0.8.2/vuex.min.js"></script></head><body> <!-- 2、view，映射到視圖的數(shù)據(jù)counterValue； --> <h4>Count is {{ counterValue }}</h4> <div> <button @click="increment">Increment +1</button> <button @click="decrement">Decrement -1</button> </div></body><script>var app = new Vue({ el: 'body', store: new Vuex.Store({ // 1、state，驅(qū)動(dòng)應(yīng)用的數(shù)據(jù)源； state: { count: 0 }, mutations: { INCREMENT: function(state, amount) { state.count = state.count + amount }, DECREMENT: function(state, amount) { state.count = state.count - amount } } }), vuex: { getters: { counterValue: function(state) { return state.count } }, // 3、actions，響應(yīng)在view上的用戶輸入導(dǎo)致的狀態(tài)變化。 actions: { increment: function({ dispatch, state }){ dispatch('INCREMENT', 1) }, decrement: function({ dispatch, state }){ dispatch('DECREMENT', 1) } } } })</script></html>
代碼中標(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、來自不同視圖的行為需要變更同一狀態(tài)
于是需要把組件的共享狀態(tà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ī)制來進(jìn)行高效的狀態(tài)更新。
1、State: 單一狀態(tài)樹，用一個(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)樹導(dǎo)致應(yīng)用的所有狀態(tài)集中在一個(gè)store對(duì)象的臃腫問題，Vuex將store分割到模塊（module）。每個(gè)模塊擁有自己的 state、mutation、action、getters、甚至是嵌套子模塊——從上至下進(jìn)行類似的分割。
接著我們開始構(gòu)建備忘錄應(yīng)用，在以下構(gòu)建過程的介紹中，再加深理解上述概念。
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í)間加起來。
在原來的目錄結(jié)構(gòu)的調(diào)整下，最終的目錄結(jié)構(gòu)為：
下面詳細(xì)介紹下：
1.首頁組件：Home.vue
<template> <div class="jumbotron"> <h2>我的備忘錄</h2> <p> <strong> <router-link to="/time-entries">創(chuàng)建一個(gè)計(jì)劃</router-link> </strong> </p> </div></template>
2.計(jì)算計(jì)劃總時(shí)長(zhǎng)組件：Sidebar.vue
View Code
3.計(jì)劃列表組件：TimeEntries.vue
View Code
4.新增計(jì)劃組件：LogTime.vue
View Code
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)樹，用一個(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) 來簡(jiǎn)化代碼（特別是我們需要調(diào)用 commit 很多次的時(shí)候）：
actions: {
increment ({ commit }) {
commit('increment')
}
}3.注冊(cè)各種數(shù)據(jù)變化的方法: mutations.js
View Code
使用常量替代 mutation 事件類型在各種 Flux 實(shí)現(xiàn)中是很常見的模式。這樣可以使 linter 之類的工具發(fā)揮作用，同時(shí)把這些常量放在單獨(dú)的文件中可以讓你的代碼合作者對(duì)整個(gè) app 包含的 mutation 一目了然：
// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'
mutations: {
// 我們可以使用 ES2015 風(fēng)格的計(jì)算屬性命名功能來使用一個(gè)常量作為函數(shù)名
[SOME_MUTATION] (state) {
// mutate state
}
}
4.記錄所有的事件名: mutation-types.js
View Code
配合上面常量替代 mutation 事件類型的使用
入口文件渲染的模版index.html比較簡(jiǎn)單：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue-notes-demo</title> </head> <body> <div id="app"> <router-view></router-view> </div> </body></html>
入口文件main.js的代碼：
View Code
代碼中
...App 相當(dāng)于 render:h => h(App)
初始化組件App.vue為：
View Code
至此，實(shí)踐結(jié)束，一些原理性的東西我還需要多去理解^_^
源代碼：【vuex2.0實(shí)踐】
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼