Vuex2.0+Vue2.0构建备忘录应用实践
一、介紹Vuex
Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化，適合于構(gòu)建中大型單頁應(yīng)用。
1、什么是狀態(tài)管理模式？
看個簡單的例子：
<!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；?--><h3>Count?is?{{?counterValue?}}</h3><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ū)動應(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)識了：
1、state，驅(qū)動應(yīng)用的數(shù)據(jù)源； 2、view，映射到視圖的數(shù)據(jù)counterValue； 3、actions，響應(yīng)在view上的用戶輸入導(dǎo)致的狀態(tài)變化。用簡單示意圖表示他們之間的關(guān)系：
我們知道，中大型的應(yīng)用一般會遇到多個組件共享同一狀態(tài)的情況：
1、多個視圖依賴于同一狀態(tài)
2、來自不同視圖的行為需要變更同一狀態(tài)
于是需要把組件的共享狀態(tài)抽取出來，以一個全局單例模式管理，另外，需要定義和隔離狀態(tài)管理中的各種概念并強制遵守一定的規(guī)則。
這就是 Vuex 背后的基本思想，借鑒了?Flux、Redux、和?The Elm Architecture。與其他模式不同的是，Vuex 是專門為 Vue.js 設(shè)計的狀態(tài)管理庫，以利用 Vue.js 的細(xì)粒度數(shù)據(jù)響應(yīng)機制來進(jìn)行高效的狀態(tài)更新。
2、Vuex的核心概念
1、State: 單一狀態(tài)樹，用一個對象包含了全部的應(yīng)用層級狀態(tài)，作為一個『唯一數(shù)據(jù)源(SSOT)』而存在，每個應(yīng)用將僅僅包含一個 store 實例。
2、Getters: Vuex 允許我們在 store 中定義『getters』（可以認(rèn)為是 store 的計算屬性）。
3、Mutations: Vuex 中的 mutations 非常類似于事件：每個 mutation 都有一個字符串的?事件類型 (type)?和 一個?回調(diào)函數(shù) (handler)。這個回調(diào)函數(shù)就是我們實際進(jìn)行狀態(tài)更改的地方，并且它會接受 state 作為第一個參數(shù)。
4、Actions:?類似于 mutation，不同在于：①Action 提交的是 mutation，而不是直接變更狀態(tài)；②Action 可以包含任意異步操作。
5、Modules: 為解決單一狀態(tài)樹導(dǎo)致應(yīng)用的所有狀態(tài)集中在一個store對象的臃腫問題，Vuex將store分割到模塊（module）。每個模塊擁有自己的 state、mutation、action、getters、甚至是嵌套子模塊——從上至下進(jìn)行類似的分割。
接著我們開始構(gòu)建備忘錄應(yīng)用，在以下構(gòu)建過程的介紹中，再加深理解上述概念。
二、環(huán)境安裝
1.安裝 vue-cli
2.初始化應(yīng)用
vue?init?webpack?vue-notes-demo cd?vue-notes-demo npm?install?//?安裝依賴包 npm?run?dev?//?啟動服務(wù)結(jié)果為：
目錄結(jié)構(gòu)為：
三、功能模塊
先看下我們要做的demo的效果為：
主要功能模塊為：
新增計劃，新增一個計劃，編輯區(qū)顯示空的計劃內(nèi)容。
移除計劃，刪除一個計劃之后，計劃列表少了該計劃。
所有計劃的總時長，將所有的計劃時間加起來。
四、項目組件劃分
在原來的目錄結(jié)構(gòu)的調(diào)整下，最終的目錄結(jié)構(gòu)為：
下面詳細(xì)介紹下：
1、組件部分
1.首頁組件：Home.vue
<template><div?class="jumbotron"><h1>我的備忘錄</h1><p><strong><router-link?to="/time-entries">創(chuàng)建一個計劃</router-link></strong></p></div></template>2.計算計劃總時長組件：Sidebar.vue
?View Code
3.計劃列表組件：TimeEntries.vue
?View Code
4.新增計劃組件：LogTime.vue
?View Code
2、vuex中用來存儲數(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)樹，用一個state對象包含了全部的應(yīng)用層級狀態(tài)，代碼中只new 了一次store實例 Vuex.Store。
2.負(fù)責(zé)觸發(fā)事件和傳入?yún)?shù)：actions.js
?View Code
實踐中，我們會經(jīng)常會用到 ES2015 的?參數(shù)解構(gòu)?來簡化代碼（特別是我們需要調(diào)用?commit?很多次的時候）：
actions:?{increment?({?commit?})?{commit('increment')} }3.注冊各種數(shù)據(jù)變化的方法:?mutations.js
?View Code
使用常量替代 mutation 事件類型在各種 Flux 實現(xiàn)中是很常見的模式。這樣可以使 linter 之類的工具發(fā)揮作用，同時把這些常量放在單獨的文件中可以讓你的代碼合作者對整個 app 包含的 mutation 一目了然：
//?mutation-types.js? export?const?SOME_MUTATION?=?'SOME_MUTATION'mutations:?{//?我們可以使用?ES2015?風(fēng)格的計算屬性命名功能來使用一個常量作為函數(shù)名[SOME_MUTATION]?(state)?{//?mutate?state}}4.記錄所有的事件名:?mutation-types.js
?View Code
配合上面常量替代 mutation 事件類型的使用
3、初始化部分
入口文件渲染的模版index.html比較簡單：
<!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
至此，實踐結(jié)束，一些原理性的東西我還需要多去理解^_^
源代碼：【vuex2.0實踐】
轉(zhuǎn)載于:https://blog.51cto.com/12883930/1923792
總結(jié)
以上是生活随笔為你收集整理的Vuex2.0+Vue2.0构建备忘录应用实践的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： yield的作用
- 下一篇： 【Java】SpringBoot入门学习