vuex管理狀態(tài)倉庫使用詳解
一.什么是Vuex？
Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。Vuex 也集成到 Vue 的官方調(diào)試工具 devtools extension，提供了諸如零配置的 time-travel 調(diào)試、狀態(tài)快照導(dǎo)入導(dǎo)出等高級調(diào)試功能。采用了全局單例模式，將組件的共享狀態(tài)抽離出來管理，使得組件樹中每一個(gè)位置都可以獲取共享的狀態(tài)或者觸發(fā)行為。
那么什么是狀態(tài)呢？我把狀態(tài)理解為在沒有使用vuex時(shí)，在當(dāng)前組件中data內(nèi)需要共用的數(shù)據(jù)為狀態(tài)。
vuex使得狀態(tài)或行為成為了共享的狀態(tài)，所共享的狀態(tài)或行為可以在各個(gè)組件中都可以訪問到，省去了子父或子子之間傳遞變量，提高了開發(fā)效率。
二.不使用vuex時(shí)與使用vuex時(shí)的差別
當(dāng)我們不使用vuex時(shí)，對于組件之間傳遞信息會(huì)較為麻煩。
不使用vuex時(shí)父子之間傳遞信息：
App.vue文件中：
<template>
<div id="app">
<Fruits :fruitList="fruitList"/>
</div>
</template>
<script>
import Goods from './components/Goods';
export default {
name: 'App',
components:{
Fruits,
Goods
},
data(){
return{
goodList:[
{
name:'doll',
price:12
},
{
name:'glass',
price:10
}
],
}
}
}
</script>
<style>
</style>
Good.vue文件中：
<template>
<div class="hello">
<ul>
<li v-for="(good,index) in goodList" :key="index">
name:{{good.name}} number: {{good.number}} {{index}}
</li>
</ul>
</div>
</template>
<script>
export default {
props:['goodList'],
}
</script>
<style>
</style>
兄弟之間傳遞信息：
首先先創(chuàng)建一個(gè)js文件作為兩兄弟之間傳輸?shù)募~扣，這里起名為msg.js
//創(chuàng)建并暴露vue import Vue from 'vue'; export default new Vue
兄弟組件Goods：
<template>
<div>
<button @click="deliver">點(diǎn)擊</button>
</div>
</template>
<script>
import MSG from '../msg';
export default {
data(){
return{
msg:'hahah'
}
},
methods:{
deliver() {
MSG.$emit('showMsg',this.msg)
}
}
}
</script>
<style>
</style>
兄弟組件Fruits:
<template>
<div>
<button @click="deliver">點(diǎn)擊</button>
</div>
</template>
<script>
import MSG from '../msg';
export default {
data(){
return{
msg:'hahah'
}
},
methods:{
deliver() {
MSG.$emit('showMsg',this.msg)
}
}
}
</script>
<style>
</style>
在App組件中的代碼：
點(diǎn)擊按鈕:
上述為兄弟組件之間的傳值，是不是感覺到有點(diǎn)麻煩呢？初學(xué)vue組件傳值時(shí)，我也覺得這種方法很麻煩，vuex很好的解決了這個(gè)問題，愉快的編寫代碼。
使用vuex共享狀態(tài)數(shù)據(jù)
store.js中的配置：
import Vue from 'vue'; //引入vue
import Vuex from 'vuex'; //引入vuex
Vue.use(Vuex) //聲明使用Vuex
const state = {
count:1,
totalName:'total'
}
const store = new Vuex.Store({
state
})
export default store
App.vue中的配置：
<template>
<div id="app">
<Fruits>
<div>--------------------------</div>
<Goods>
</div>
</template>
<script>
import Fruits from './components/Fruits';
import Goods from './components/Goods';
export default {
name: 'App',
components:{
Fruits,
Goods
}
}
</script>
<style>
</style>
Good.vue中的配置
<template>
<div>
<div>我是Goods中的組件</div>
<div>我們共同的數(shù)字:{{this.count}}</div>
<div>我們共同的名字是 {{this.totalName}} </div>
</div>
</template>
<script>
import {mapState} from 'vuex'; //引入輔助函數(shù)
export default {
computed:{
...mapState(['count','totalName']) //對象展開運(yùn)算符
}
}
</script>
<style>
</style>
Fruits.vue
<template>
<div>
<div>我是Fruits中的組件</div>
<div>我們共同的數(shù)字:{{this.count}}</div>
<div>我們共同的名字是 {{this.totalName}} </div>
</div>
</template>
<script>
import {mapState} from 'vuex'; //引入輔助函數(shù)
export default {
computed:{
...mapState(['count','totalName']) //對象展開運(yùn)算符
}
}
</script>
<style>
</style>
上述為使用vuex進(jìn)行簡單的引用狀態(tài)數(shù)據(jù)值的例子，將數(shù)據(jù)放到state中進(jìn)行管理，引入輔助函數(shù)和將state中的數(shù)據(jù)引入組件，在組件中進(jìn)行調(diào)用，這種方法是不是比不使用vuex更容易了點(diǎn)呢？但是這才只是個(gè)非常淺非常淺的開始。下面進(jìn)入正文?。?！
三.vuex的使用
vuex的安裝
打開終端，輸入命令行npm install vuex --save進(jìn)行下載vuex
vuex的核心概念：
- State：共享狀態(tài)，相當(dāng)于組件中data中的數(shù)據(jù)，只不過此時(shí)變成了全局變量。
- Getter：基于state的派生狀態(tài)，相當(dāng)于組件中的computed中的屬性。
- Mutation：更改vuex中store共享狀態(tài)中的方法，通過提交mutation來去修改狀態(tài)，進(jìn)行同步操作數(shù)據(jù)，通常用于action獲取異步數(shù)據(jù)，獲取通過commit提交數(shù)據(jù)給mutation，在mutation同步操作state中的數(shù)據(jù)。
- action：支持異步操作，可用于異步獲取請求中的數(shù)據(jù),并將獲取的數(shù)據(jù)同步commit提交給mutation，實(shí)現(xiàn)ajax異步請求數(shù)據(jù)，mutation將其數(shù)據(jù)同步到state中。
- module：為了方便后期對于項(xiàng)目的管理，對于store中的state，mutation，action，getter進(jìn)行分子模塊化管理。
下面我們的介紹將會(huì)在Module規(guī)范中進(jìn)行介紹。
Module子模塊化管理
對于子模塊管理我們需要?jiǎng)?chuàng)建核心化管理對象store起名為index.js將其他state,getter,mutations,actions。引入到該store模塊中，并將其暴露Store對象，下面為代碼部分。
module結(jié)構(gòu)
vuex應(yīng)用核心管理倉庫store
下面為store的代碼，這里的js我們?nèi)∶麨閕ndex.js，通過將state,mutations,actions,getters引入到store中，并暴露出store對象。
/*
vuex最核心的管理對象store
*/
import Vue from 'vue';
import Vuex from 'vuex';
import state from './state';
import mutations from './mutations';
import actions from './actions';
import getters from './getters';
//聲明使用插件
Vue.use(Vuex)
//new 一個(gè)Vuex的對象,將state,mutation,action,getters配置到vuex的store中,方便管理數(shù)據(jù)
export default new Vuex.Store({
state,
mutations,
actions,
getters,
})
state狀態(tài)管理數(shù)據(jù)
我們通常將需要進(jìn)行管理的共享數(shù)據(jù)，放入state中，使其形似為全局變量，對于需要的組件進(jìn)行引入該state狀態(tài)數(shù)據(jù)。下面為state中的代碼舉例：
/*
狀態(tài)對象
*/
export default{
userInfo: {}, //用戶信息
count:1
}
mutation-types
使用常量來代替mutations事件類型是一件很常見的模式，將這些常量放進(jìn)一個(gè)單獨(dú)的文件，可以使你的代碼合作者對于你的代碼一目了然，增強(qiáng)了代碼的可閱讀性。下面上代碼，由于只是例子，所以此時(shí)只引入了一個(gè)方法。
/* 包含n個(gè)mutation的type名稱常量 */ export const RECEIVE_USER_INFO = 'receive_user_info' //接收用戶信息
actions的異步操作
actions與其mutations類似，但其可以進(jìn)行異步操作，且將異步操作獲取的數(shù)據(jù)提交給mutations，使得mutations更改state中的狀態(tài)數(shù)據(jù),這里常常用于獲取ajax請求中的數(shù)據(jù)(因?yàn)槭钱惒?，并將其獲取的數(shù)據(jù)提交給mutations得到state數(shù)據(jù)狀態(tài)的更新。這里的發(fā)送ajax發(fā)送請求的代碼，這里就不進(jìn)行演示了，大家能夠了解，此時(shí)action中的數(shù)據(jù)是通過發(fā)送ajax請求來獲取的就行。此時(shí)也能體現(xiàn)出actions中可以進(jìn)行異步操作。下面上代碼：
/*
通過mutation間接更新state的多個(gè)方法的對象
*/
import {
RECEIVE_USER_INFO, //引入在mutation-types定義的常量
} from './mutation-types';
import {
reqUserInfo,
} from '../api'; //這里引入發(fā)送ajax請求的方法
export default{
// 異步獲取用戶信息
async getUserInfo({commit}){
//引入發(fā)送請求數(shù)據(jù)的方法,異步等待獲取數(shù)據(jù)，并將其數(shù)據(jù)賦值給result
const result = await reqUserInfo()
//當(dāng)獲取數(shù)據(jù)成功時(shí)，result.code會(huì)為0，失敗則為1，這里用于判斷是否獲取狀態(tài)數(shù)據(jù)成功
if (result.code === 0) {
const userInfo = result.data //獲取請求中的數(shù)據(jù)
//通過commit將其方法，和請求后獲取的用戶信息傳遞給mutation
commit(RECEIVE_USER_INFO,{userInfo})
}
}
}
需要注意的是：在組件中應(yīng)用下列方式來去調(diào)用vuex組件中的方法:
this.$store.dispatch('getUserInfo')
mutations同步提交數(shù)據(jù)
mutations用于更改state中的狀態(tài)邏輯的，且為同步更改state中的狀態(tài)數(shù)據(jù)。需要知道的是在vuex中只能通過mutation來去修改state對象，可以通過獲取actions獲取到的數(shù)據(jù)去修改state,也可以在mutations模塊中直接定義方法來去更改狀態(tài)數(shù)據(jù)。通過mutations和上面的actions模塊大家也可以看出commit是用于mutation模塊中的。在組件中調(diào)用其mutation模塊的代碼為：
this.$store.commit('increment')
下面上mutation模塊中的代碼：
/*
直接更新state的多個(gè)方法的對象
*/
import {
RECEIVE_USER_INFO,
} from './mutation-types';
export default{
//方法中的第一個(gè)默認(rèn)形參為state,也可以傳入額外的參數(shù)，
既mutation的載荷(playload)
[RECEIVE_USER_INFO](state,{userInfo}){
state.userInfo = userInfo
},
//不通過actions直接在mutation模塊中更改state狀態(tài)數(shù)據(jù)
increment(state){
state.count = 3
}
}
Getters對state進(jìn)行加工
Getters相當(dāng)于computed計(jì)算屬性，用于加工處理state狀態(tài)數(shù)據(jù)，有其兩個(gè)默認(rèn)參數(shù)，第一個(gè)默認(rèn)參數(shù)為state，第二個(gè)默認(rèn)參數(shù)為getters。
在組件中調(diào)用該方法的代碼片段為：
this.$store.getters.totalCount()
下面為Getters中的代碼片段:
/*
包含多個(gè)基于state的getter計(jì)算屬性的對象
*/
export default{
plusCount(state){
return state.count + 1
},
//獲取state中狀態(tài)數(shù)據(jù)對象，和獲取getters模塊中plusCount數(shù)據(jù)
totalCount(state,getters){
return getters.plusCount + state.count
}
}
那么對于以上的store我們就簡單介紹完了，相信大家看完后對于vuex會(huì)有一定的理解。那么這個(gè)時(shí)候我們要想，是不是使用this.$store.state或this.$store.getters.xxx感到麻煩呢？下面我們介紹另一種引入state和getters的方式
輔助函數(shù)mapState和mapGetters
對于上述的引用state和getters的方法是不是感到麻煩呢？使用mapState你將會(huì)感受到便利。
//首先我們需要先將輔助函數(shù)引入
import { mapGetters,mapState } from 'vuex'
export default {
computed: {
// 使用對象展開運(yùn)算符將 getter 混入 computed 對象中
...mapGetters(['plusCount','totalCount',])
// 使用對象展開運(yùn)算符將 state 混入 computed 對象中
...mapState(['userInfo','count'])
}
}
到此這篇關(guān)于vuex管理狀態(tài)倉庫使用詳解的文章就介紹到這了,更多相關(guān)vuex管理狀態(tài)倉庫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
electron-vue?項(xiàng)目添加啟動(dòng)loading動(dòng)畫的實(shí)現(xiàn)思路
electron-vue腳手架搭建的項(xiàng)目，在開發(fā)階段可能你注意不到項(xiàng)目啟動(dòng)慢的問題，但是在build?生成的exe可執(zhí)行文件，啟動(dòng)后，要反應(yīng)很久才能進(jìn)入到app.vue?中加載的頁面，體驗(yàn)性很差，本文給大家介紹electron?vue啟動(dòng)動(dòng)畫效果的實(shí)例代碼，感興趣的朋友一起看看吧2022-01-01
這篇文章主要給大家介紹了關(guān)于vue.js項(xiàng)目中實(shí)用的小技巧，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
vuejs實(shí)現(xiàn)本地?cái)?shù)據(jù)的篩選分頁功能思路詳解
今天做項(xiàng)目需要一份根據(jù)本地?cái)?shù)據(jù)的篩選分頁功能，下面小編把vuejs實(shí)現(xiàn)本地?cái)?shù)據(jù)的篩選分頁功能的實(shí)現(xiàn)思路分享到腳本之家平臺，需要的朋友可以參考下2017-11-11
vue實(shí)現(xiàn)過渡動(dòng)畫Message消息提示組件示例詳解
這篇文章主要為大家介紹了vue實(shí)現(xiàn)過渡動(dòng)畫Message消息提示組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要為大家詳細(xì)介紹了vue拖拽組件vuedraggable的使用說明，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue中使用echarts的步驟，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
vue.js利用defineProperty實(shí)現(xiàn)數(shù)據(jù)的雙向綁定
本篇文章主要介紹了用Node.js當(dāng)作后臺、jQuery寫前臺AJAX代碼實(shí)現(xiàn)用戶登錄和注冊的功能的相關(guān)知識。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-04-04
Vue在原窗口與新窗口打開外部鏈接的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue如何在原窗口與新窗口打開外部鏈接,文中給大家提到了vue跳轉(zhuǎn)外部鏈接的實(shí)現(xiàn)代碼，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-02-02
Vue Element 分組+多選+可搜索Select選擇器實(shí)現(xiàn)示例
這篇文章主要介紹了Vue Element 分組+多選+可搜索Select選擇器實(shí)現(xiàn)示例,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
在vue項(xiàng)目中引入scss并使用scss樣式詳解
SCSS是一種CSS預(yù)處理語言,定義了一種新的專門的編程語言,編譯后形成正常的css文件,為css增加一些編程特性,這篇文章主要給大家介紹了關(guān)于在vue項(xiàng)目中引入scss并使用scss樣式的相關(guān)資料,需要的朋友可以參考下2022-07-07