快捷導(dǎo)航

五分鐘搞懂Vuex實(shí)用知識(小結(jié))

更新時(shí)間：2019年08月12日 09:12:52 作者：達(dá)升笑講故事

本篇文章主要介紹了五分鐘搞懂Vuex實(shí)用知識，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

這段時(shí)間一直在用vue寫項(xiàng)目，vuex在項(xiàng)目中也會(huì)依葫蘆畫瓢使用，但是總有一種朦朦朧朧的感覺。于是決定徹底搞懂它。

看了一下午的官方文檔，以及資料，才發(fā)現(xiàn)vuex so easy！

作為一個(gè)圈子中的人，決定輸出一下文檔，如果你仔細(xì)看完這篇文章，保證你對vuex熟練掌握。

我把自己的代碼上傳到了github，大家有需要的可以拉下來：github

先說一下vuex到底是什么？

vuex 是一個(gè)專門為vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式。

這個(gè)狀態(tài)我們可以理解為在data中的屬性，需要共享給其他組件使用的部分。

也就是說，是我們需要共享的data，使用vuex進(jìn)行統(tǒng)一集中式的管理。

vuex中，有默認(rèn)的五種基本的對象：

state：存儲狀態(tài)（變量）
getters：對數(shù)據(jù)獲取之前的再次編譯，可以理解為state的計(jì)算屬性。我們在組件中使用 $sotre.getters.fun()
mutations：修改狀態(tài)，并且是同步的。在組件中使用$store.commit('',params)。這個(gè)和我們組件中的自定義事件類似。
actions：異步操作。在組件中使用是$store.dispath('')
modules：store的子模塊，為了開發(fā)大型項(xiàng)目，方便狀態(tài)管理而使用的。這里我們就不解釋了，用起來和上面的一樣。

下面我們正式開始，一步步使用vuex

1、首先創(chuàng)建一個(gè)vue-cli項(xiàng)目

執(zhí)行下面的命令，創(chuàng)建一個(gè)app項(xiàng)目（這里也可以使用其他非webpack模板，以及非app名稱）

vue init webpack app

2、創(chuàng)建完成之后，我們進(jìn)入文件夾下，并且運(yùn)行項(xiàng)目

cd app/ 
npm run dev

接下來我們在src目錄下創(chuàng)建一個(gè)vuex文件夾

并在vuex文件夾下創(chuàng)建一個(gè)store.js文件

文件夾目錄長得是這個(gè)樣子

3、目前我們還沒有引入vuex，我們需要先下載vuex，并且引入它

在保證我們處于我們項(xiàng)目下，在命令行輸入下面命令，安裝vuex

npm install vuex --save

4、安裝成功之后，我們就可以在store.js中盡情玩耍我們的vuex了！

在store.js文件中，引入vuex并且使用vuex，這里注意我的變量名是大寫Vue和Vuex

import Vue from 'vue' 
import Vuex from 'vuex' 
Vue.use(Vuex) 
const state = { 
 count: 0 
} 
export default new Vuex.Store({ 
 state 
})

接下來，在main.js中引入store

import Vue from 'vue' 
import App from './App' 
import router from './router' 
import store from './vuex/store' // 引入store 
Vue.config.productionTip = false 
/* eslint-disable no-new */ 
new Vue({ 
 el: '#app', 
 router, 
 store, 
 components: { App }, 
 template: '<App/>' 
})

然我我們在任意一個(gè)組件中就可以使用我們定義的count屬性了。

這里我們在helloWorld中使用一下，去除helloworld.vue中不用的標(biāo)簽

<template> 
 <div class="hello"> 
 <h3>{{$store.state.count}}</h3> 
 </div> 
</template>

打開我們剛才運(yùn)行項(xiàng)目的瀏覽器，可以看到已經(jīng)使用成功了！

并且在vue開發(fā)工具中我們可以看到我們定義的變量count

到這一步，已經(jīng)成功了一小半！vuex很簡單吧？

回想一下，我們只需要在下載安裝使用vuex，在我們定義的store.js中定義state對象，并且暴露出去。

在main.js中使用我們的store.js（這里是為了防止在各個(gè)組件中引用，因?yàn)閙ain.js中，有我們的new Vue 實(shí)例啊?。?/p>

現(xiàn)在我們已經(jīng)使用了vuex中的state，接下來我們?nèi)绾尾僮鬟@個(gè)值呢？沒錯(cuò)！用mutations和actions

我們繼續(xù)操作store.js文件

我們在sotre.js中定義mutations對象，該對象中有兩個(gè)方法，mutations里面的參數(shù)，第一個(gè)默認(rèn)為state，接下來的為自定義參數(shù)。

我們在mutations中定義兩個(gè)方法，增加和減少，并且設(shè)置一個(gè)參數(shù)n，默認(rèn)值為0，然后在Vuex.Store中使用它

/** 
 * mutations 里面放置的是我們操作state對象屬性的方法 
 */ 
const mutations = { 
 mutationsAddCount(state, n = 0) { 
 return (state.count += n) 
 }, 
 mutationsReduceCount(state, n = 0) { 
 return (state.count -= n) 
 } 
} 
export default new Vuex.Store({ 
 state, 
 mutations 
})

然后我們在helloWorld.vue中，使用這個(gè)方法

還記得我們?nèi)绾卧诮M件中使用mutations嗎？就和自定義事件非常相似

<template> 
 <div class="hello"> 
 <h3>{{$store.state.count}}</h3> 
 <div> 
 <button @click="handleAddClick(10)">增加</button> 
 <button @click="handleReduceClick(10)">減少</button> 
 </div> 
 </div> 
</template>

methods: { 
 handleAddClick(n){ 
 this.$store.commit('mutationsAddCount',n); 
 }, 
 handleReduceClick(n){ 
 this.$store.commit('mutationsReduceCount',n); 
 } 
 }

來瀏覽器看一下效果如何！

我們可以看到每當(dāng)觸發(fā)事件時(shí)，我們都可以在vue開發(fā)工具中看到我們觸發(fā)的mutations方法，以及參數(shù)

完美！

接下來就是actions，actions是異步操作

創(chuàng)建actions對象，并且使用

這里我在兩個(gè)方法中使用了兩個(gè)不同的參數(shù)，一個(gè)是context，它是一個(gè)和store對象具有相同對象屬性的參數(shù)。在第二個(gè)函數(shù)中，我是直接使用了這個(gè)對象的commit的方法。

憑大家喜好就行

const actions = { 
 actionsAddCount(context, n = 0) { 
 console.log(context) 
 return context.commit('mutationsAddCount', n) 
 }, 
 actionsReduceCount({ commit }, n = 0) { 
 return commit('mutationsReduceCount', n) 
 } 
} 
export default new Vuex.Store({ 
 state, 
 mutations, 
 actions 
})

在helloWorld.vue中

在methods中，增加兩個(gè)方法，使用dispath來觸發(fā)

<div>異步操作</div> 
 <div> 
 <button @click="handleActionsAdd(10)">異步增加</button> 
 <button @click="handleActionsReduce(10)">異步減少</button> 
 </div>

handleActionsAdd(n){ 
 this.$store.dispatch('actionsAddCount',n) 
 }, 
 handleActionsReduce(n){ 
 this.$store.dispatch('actionsReduceCount',n) 
 }

進(jìn)入瀏覽器看下效果如何！

最后就是getters

我們一般使用getters來獲取我們的state，因?yàn)樗闶莝tate的一個(gè)計(jì)算屬性

const getters = { 
 getterCount(state, n = 0) { 
 return (state.count += n) 
 } 
} 
export default new Vuex.Store({ 
 state, 
 mutations, 
 actions, 
 getters 
})

<h4>{{count}}</h4>

const getters = { 
 getterCount(state) { 
 return (state.count += 10) 
 } 
}

getters算是非常簡單的了。

到這里，如果全都看懂了，vuex你已經(jīng)沒有壓力了。

但是vuex官方給了我們一個(gè)更簡單的方式來使用vuex，也就是 {mapState, mapMutations, mapActions, mapGetters}

只要我們把上面基礎(chǔ)的搞懂，這些都不在話下，只是方面我們書寫罷了。

就這么簡單，這里我們用到了es6的擴(kuò)展運(yùn)算符。如果不熟悉的同學(xué)還是去看看阮一峰大神的《Es6標(biāo)準(zhǔn)入門》這本書，我是看完了，受益匪淺！

<script> 
import {mapState, mapMutations, mapActions, mapGetters} from 'vuex' 
export default { 
 name: 'HelloWorld', 
 data () { 
 return { 
 msg: 'Welcome to Your Vue.js App' 
 } 
 }, 
 methods: { 
 ...mapMutations({ 
 handleAddClick: 'mutationsAddCount', 
 handleReduceClick: 'mutationsReduceCount' 
 }), 
 ...mapActions({ 
 handleActionsAdd: 'actionsAddCount', 
 handleActionsReduce: 'actionsReduceCount' 
 }) 
 // handleAddClick(n){ 
 // this.$store.commit('mutationsAddCount',n); 
 // }, 
 // handleReduceClick(n){ 
 // this.$store.commit('mutationsReduceCount',n); 
 // }, 
 // handleActionsAdd(n){ 
 // this.$store.dispatch('actionsAddCount',n) 
 // }, 
 // handleActionsReduce(n){ 
 // this.$store.dispatch('actionsReduceCount',n) 
 // } 
 }, 
 computed: { 
 count(){ 
 return this.$store.getters.getterCount 
 } 
 } 
} 
</script>

同理，getters和 state也可以使用 mapState，mapGetters

如果你更懶的話，我們可以使用數(shù)組，而非對象，或者es6里面的對象簡寫方式

就像這種