[Vue.js啟航]——使用Vuex進行狀態管理
Vue.js啟航——英雄編輯器（五）
簡介
這一篇部落格將是這一系列部落格的最終篇，主要探討的是Vuex外掛的使用。先介紹一下Vuex。Vuex是Vue框架的狀態管理外掛，採用集中式儲存管理應用的所有元件的狀態。狀態通俗來講就是元件中的資料，狀態的管理也就是各個元件中資料的管理。當你的應用足夠簡單的話，我們可以使用中央事件匯流排的方式來實現簡單的管理，具體可以參考 [Vue.js啟航]——多元件應用構建 ，當我們要構建中大型的單頁應用的時候我們才會考慮使用Vuex來集中管理元件的狀態。這篇文章我們會繼續 [Vue.js啟航]——多元件應用構建，去掉中央事件匯流排，採用Vuex進行改造。
使用Vuex的多元件英雄編輯器
使用Vuex的多元件英雄編輯器和使用時間匯流排的多元件英雄編輯器實現出來的效果是一樣的
最主要的改造就是將bus換成Vuex.Store例項，將heroVue例項中的computed選項作一些調整。
Vuex.Store例項
跟中央時間匯流排一樣，使用Vuex管理狀態也需要一個額外的元件例項，在中央時間匯流排中是一個Vue例項，而在Vuex中則是Vuex.Store例項。最簡單的Vuex.Store應該包括state和mutations選項，其中state選項儲存的是需要管理的狀態，而mutations則是控制狀態轉變的一些方法，例如在mutations中有一個改變state中count的方法
var store=new Vuex.Store({
state:..
mutations:{
increment (state){
state.count++;
}
}
})
當我們的元件需要使用mutations的方法更改state的狀態時只需要呼叫
store.commit('increment')
使用載荷傳遞引數
在我們的例子中需要將選中的英雄作為引數傳遞給mutations中的方法。在這裡就直接拿我們的程式碼舉例子了,使用載荷的mutations
//...
mutations:{
selectHero(state,selectedHero){
state.hero=selectedHero
}
}
在英雄列表中的呼叫方式是
store.commit('selectHero'，this.selectedHero)
但這並不是官方推薦的寫法，官方的規範中要求，載荷應該是一個物件，這樣可以包含多個欄位並且記錄的mutation更加易讀，我們繼續使用載荷物件進行改造
//...
mutations:{
selectHero(state,payload){
state.hero=payload.selectedHero;
}
}
然後在英雄列表中的呼叫方式是
store.commit({
type:'selectHero',
selectedHero:this.selectedHero
})
元件或者例項獲取狀態
當我們把Vuex.Stroe例項編寫好之後，已經把狀態和改變狀態的方法都集中起來進行管理了，那接下來我們就要獲取狀態的值了。獲取狀態值的一般方法是return store.state.xxxxxx為狀態值，例如我們在這裡需要獲取hero的狀態值就寫return sotre.state.hero，在這個例子中，我們只需要在hero例項中的computed選項中返回狀態值就好
//..
computed:{
hero:function(){
return store.state.hero;
}
}
到這裡我們就完成了從中央事件匯流排到Vuex的轉變。
模組化的Sotre
其實一些有經驗的人到這裡可能就會問，我們把所有的元件的狀態都交由一個Store管理，那麼，當我們要管理的狀態很多，那Store不就會膨脹了嗎？其實Vuex的設計者早就想到了這一點，所以Vuex允許使用模組化管理Store。每一個模組其實就是擁有state和mutations,actions,getters中的一個或多個選項的JS物件，這裡我們只使用了state和mutations。構建模組化Store的程式碼如下：
var moduleA={
state:{...},
mutations:{...},
...
}
var moduleB={
state:{...},
mutations:{...},
...
}
然後在Store例項中將各個模組組裝起來
var store=new Vuex.Store({
modules:{
a:moduleA,
b:moduleB
}
})
獲取狀態的話使用
store.state.a.state.xxxx
總結
這篇文章主要是介紹了Vuex的簡單使用，配合Vue-Router，和Vue本身組成了Vue的核心部分。Vuex當然不止文章中用到的state和mutations還有包含非同步操作的actions以及用於篩選資料或者格式化輸出的getters。模組化系統還有名稱空間等內容。在這裡接觸到關於Vuex的內容其實差不多，就不多詳述了。
這一系列的文章也就結束了，接下來會新開一系列的文章，主要關於模組化構建系統構建Vue應用，使用單檔案元件，和Vue-Router、Vuex的進階使用和Vue的核心概念等。
可執行程式碼
hero.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="hero.css">
</head>
<body>
<div id="hero">
<hero-list v-bind:heroes="heroes"
v-bind:title="title"></hero-list>
<hero-detail v-bind:hero="hero"></hero-detail>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script src="hero.js"></script>
</html>
hero.js
//十位英雄資料
const HEROES=[
{ id: 11, name: 'Mr. Nice' },
{ id: 12, name: 'Narco' },
{ id: 13, name: 'Bombasto' },
{ id: 14, name: 'Celeritas' },
{ id: 15, name: 'Magneta' },
{ id: 16, name: 'RubberMan' },
{ id: 17, name: 'Dynama' },
{ id: 18, name: 'Dr IQ' },
{ id: 19, name: 'Magma' },
{ id: 20, name: 'Tornado' }
];
//Vuex.Store例項
var store=new Vuex.Store({
state:{
hero:""
},
mutations:{
selectHero(state,payload){
state.hero=payload.selectedHero;
}
}
})
//多個元件
//英雄詳情元件
Vue.component("hero-detail",{
props:["hero"],
template:'\
<div v-if="hero">\
<h2>{{hero.name}}</h2>\
<div><label>id:</label>{{hero.id}}</div>\
<div>\
<label>name:</label>\
<input v-model="hero.name" placeholder="name"/>\
</div>\
</div>\
',
})
//英雄列表元件
Vue.component("hero-list",{
props:["title","heroes"],
template:'\
<div>\
<h1>{{title}}</h1>\
<h2>My Heroes</h2>\
<ul class="heroes">\
<li v-for="hero in heroes"\
v-on:click="onSelect(hero)"\
v-bind:class="{selected:hero===selectedHero}">\
<span class="badge">{{hero.id}}</span>{{hero.name}}\
</li>\
</ul>\
</div> \
',
methods:{
onSelect:function(hero){
this.selectedHero=hero
//bus.$emit("selectHero",this.selectedHero);
store.commit({
type:'selectHero',
selectedHero:this.selectedHero
})
}
},
data:function(){
return {selectedHero:""};
}
})
var hero=new Vue({
el:"#hero",
data:{
heroes:HEROES,
title:"Tour of Heroes",
},
computed:{
hero:function(){
return store.state.hero;
}
},
})
hero.css
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
h2, h3 {
color: #444;
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
}
.selected {
background-color: #CFD8DC !important;
color: white;
}
body {
margin: 2em;
}
body, input[text] {
color: #888;
font-family: Cambria, Georgia;
}
.heroes {
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
width: 15em;
}
.heroes li {
cursor: pointer;
position: relative;
left: 0;
background-color: #EEE;
margin: .5em;
padding: .3em 0;
height: 1.6em;
border-radius: 4px;
}
.heroes li.selected:hover {
background-color: #BBD8DC !important;
color: white;
}
.heroes li:hover {
color: #607D8B;
background-color: #DDD;
left: .1em;
}
.heroes .text {
position: relative;
top: -3px;
}
.heroes .badge {
display: inline-block;
font-size: small;
color: white;
padding: 0.8em 0.7em 0 0.7em;
background-color: #607D8B;
line-height: 1em;
position: relative;
left: -1px;
top: -4px;
height: 1.8em;
margin-right: .8em;
border-radius: 4px 0 0 4px;
}
[class*='col-'] {
float: left;
padding-right: 20px;
padding-bottom: 20px;
}
[class*='col-']:last-of-type {
padding-right: 0;
}
a {
text-decoration: none;
}
h3 {
text-align: center; margin-bottom: 0;
}
h4 {
position: relative;
}
.grid {
margin: 0;
}
.col-1-4 {
width: 23%;
}
.module {
padding: 20px;
text-align: center;
color: #eee;
max-height: 120px;
min-width: 120px;
background-color: #607D8B;
border-radius: 2px;
}
.module:hover {
background-color: #EEE;
cursor: pointer;
color: #607d8b;
}
.grid-pad {
padding: 10px 0;
}
.grid-pad > [class*='col-']:last-of-type {
padding-right: 20px;
}
@media (max-width: 600px) {
.module {
font-size: 10px;
max-height: 75px; }
}
@media (max-width: 1024px) {
.grid {
margin: 0;
}
.module {
min-width: 60px;
}
}
nav a {
padding: 5px 10px;
text-decoration: none;
margin-top: 10px;
display: inline-block;
background-color: #eee;
border-radius: 4px;
}
nav a:visited, a:link {
color: #607D8B;
}
nav a:hover {
color: #039be5;
background-color: #CFD8DC;
}
nav a.router-link-active {
color: #039be5;
}
button {
margin-top: 20px;
font-family: Arial;
background-color: #eee;
color: #888888;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer; cursor: hand;
}
button:hover {
background-color: #cfd8dc;
}
button:disabled {
background-color: #eee;
color: #ccc;
cursor: auto;
}
相關推薦
[Vue.js啟航]——使用Vuex進行狀態管理
Vue.js啟航——英雄編輯器（五） 簡介 這一篇部落格將是這一系列部落格的最終篇，主要探討的是Vuex外掛的使用。先介紹一下Vuex。Vuex是Vue框架的狀態管理外掛，採用集中式儲存管理應用的所有元件的狀態。狀態通俗來講就是元件中的資料，狀態的管理
vue.js中vuex狀態管理的實現與模組化
本文采用的前端元件為ElementUI，所以需要在使用vuecli搭建前端工程，後繼續安裝npm install element-ui，並在main.js中引入 main.js程式碼： import Element from 'element-ui'; im
vue-cli搭建的專案中使用vuex實現狀態管理
1、安裝 使用vue-cli搭建好專案以後，安裝vuex npm install vuex --save-dev 2、建立Vuex.Store例項 對於大型應用，需要儲存的狀態可能很多，我們就將store中的state、getters 、mutations 和 a
vue + vuex 的狀態管理的簡單使用
每一份總結總會有一份收穫…… VUE + vuex 的狀態管理的簡單使用： 使用webpack開發VUE的元件中，每個元件的樣式，js，資料，一般情況下都是獨立的。但是有些時候，我們希望有些資料是共享的，比如元件A中點選事件操作某個標籤的v-show=’fl
Trident中使用HBase進行狀態管理
ans args rgs idt 訂單 bat clu test pac 1.使用的類 2.使用HBaseMapState 3.使用狀態管理 使用的狀態管理還要看Spout StateFactory factory1 = HBaseMapStat
基於vue.js的簡單用戶管理
-c png -h search prev hour pad includes pattern 功能描述：添加、修改、搜索過濾 效果圖： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head&
如何對第一個Vue.js組件進行單元測試 （下）
發生 清理 定位元素 after 斷言 www. array 12c 良好的 我們的首次測試 讓我們來寫首個測試。我們首先需要使用shallowMount手動掛載我們的組件，並將其存儲在我們將執行斷言的變量中。我們還可以通過propsData屬性傳遞道具作為對象。
基於Vue和ElementUI/vue-router 和 vuex的後臺管理系統基礎腳手架
我也看了許多的開源框架,各有各的好吧 我整理了一下我之前的專案 提供了一套基本的基礎框架 開箱即用的 使用了vue-router 和 vuex ajax請求使用的axios 提供最基本的腳手架服務 github:https://github.com/langy
Vue.js框架--Vuex實現元件裡資料持久化（二十八）
主要操作技能： Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式 新聞頁面每次切換路由時，再次訪問就會請求資料；那麼如何直接從vuex中持久化資料呢？
Vue.js框架--Vuex實現不同元件計數器資料共享（二十七）
主要操作技能： 官網：https://vuex.vuejs.org/zh/ 一、Vuex 解決不同元件資料共享，資料持久化。 1.安裝 cnpm install vuex --save &nbs
基於 Redux + Redux Persist 進行狀態管理的 Flutter 應用示例
好久沒在 SegmentFault 寫東西，唉，也不知道 是忙還是懶，以後有時間 再慢慢寫起來吧，最近開始學點新東西，有的寫了，個人部落格跟這裡同步。 一直都在自己的 React Native 應用中使用 Redux，其實更大情況下也是使用它來管理應用的會話狀態以及當前登入的使用者資訊等等簡單的資料，很好用
Vue.js實踐：一個Node.js+mongoDB+Vue.js的部落格內容管理系統
專案來源 以前曾用過WordPress搭建自己的部落格網站，但感覺WordPress很是臃腫。所以一直想自己寫一個部落格內容管理器。 正好近日看完了Vue各個外掛的文件，就用著Vue嘗試寫了這個簡約的部落格內容管理器（CMS）。 完成的功能 一個基本的
webpack+vue.js+elementUI試做後臺管理頁面
前言 由於上次搭好了SSM後端框架，就想著順便把以前那個部落格網站的後臺管理系統給做了，系統的後端環境是有了，前端頁面用什麼開發呢？之前簡單的看了vue.js，所以就決定用vue.js做前端頁面，然後搜了一些vue.js配套的ui，找到了elementUI。而
Vue.js用Key值來管理可複用元素
Vue 會盡可能高效地渲染元素，通常會複用已有元素而不是從頭開始渲染。這麼做除了使 Vue 變得非常快之外，還有其它一些好處。1.那麼在上面的程式碼中切換type將不會清除使用者已經輸入的內容。因為兩個模板使用了相同的元素,input不會被替換掉——僅僅是替換了它的place
vuex 資料狀態管理，重新整理資料不丟失 這篇就夠了
vue 腳手架安裝，這裡我就不介紹了 說重點 ! 安裝 vuex npm install vuex --save 安裝成功後 ，現在我們就可以使用 vuex 了 1： 先在src 目錄下建立 store 資料夾 ， 檔案目錄如圖： 這裡我先
如何使用Vue.js來搭建一個後臺管理系統
目錄 使用的技術 基礎但不好版 1.初始化專案 2.實現初始頁內容自定義 3.使用路由 原始程式碼 自建頁面 修改路由
Vuex ~ 專門為vue.js設計的集中式狀態管理架構
state 原來 管理工具 t對象 包管理工具 emp UC maps fault 狀態:data中的屬性需要共享給其他vue組件使用的部分(即data中需要共用的屬性) 1、初識vuex直接來個小demo 下面操作都是基於vue-cli，如果不了解先學習下vue-
Vue.js狀態管理模式 Vuex
vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。 安裝、使用 vuex 首先我們在 vue.js 2.0 開發環境中安裝 vuex : npm insta
Vue.js(六)全域性狀態管理(Vuex)
一：Vuex是什麼 1.1 簡介 元件中包含檢視(模板template)、雙向繫結的資料(data)、以及一些方法(methods)，這3個都寫在同一個元件(component)裡面, 一般檢視(View)觸發方法動作(Actions)，動作影響資料狀態(State), 資料狀態
Vuex ，一個專為 Vue.js 應用程式開發的狀態管理模式
vuex ： 狀態管理器，能夠管理你的資料狀態 作用：將資料交給state集中管理、分發。 應用：用於複雜的頁面，一個數據被多個頁面或者路由共享（互相互動），或者多層級資料互動時可以使用vuex 參考地址：https://vuex.vuejs.o