本篇內(nèi)容介紹了“vuex可以用來做什么”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

在沂南等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站設(shè)計、成都網(wǎng)站制作 網(wǎng)站設(shè)計制作按需求定制設(shè)計,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),成都全網(wǎng)營銷,外貿(mào)營銷網(wǎng)站建設(shè),沂南網(wǎng)站建設(shè)費(fèi)用合理。

先說一下vuex到底是什么？

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

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

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

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

• state：存儲狀態(tài)（變量）

• getters：對數(shù)據(jù)獲取之前的再次編譯，可以理解為state的計算屬性。我們在組件中使用 $sotre.getters.fun()

• mutations：修改狀態(tài)，并且是同步的。在組件中使用$store.commit('',params)。這個和我們組件中的自定義事件類似。

• actions：異步操作。在組件中使用是$store.dispath('')

• modules：store的子模塊，為了開發(fā)大型項(xiàng)目，方便狀態(tài)管理而使用的。這里我們就不解釋了，用起來和上面的一樣。

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

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

執(zhí)行下面的命令，創(chuàng)建一個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)建一個vuex文件夾

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

文件夾目錄長得是這個樣子

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: '' 
})

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

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

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

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

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

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

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

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

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

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

我們在mutations中定義兩個方法，增加和減少，并且設(shè)置一個參數(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中，使用這個方法

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

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

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

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

完美！

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

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

這里我在兩個方法中使用了兩個不同的參數(shù)，一個是context，它是一個和store對象具有相同對象屬性的參數(shù)。在第二個函數(shù)中，我是直接使用了這個對象的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中，增加兩個方法，使用dispath來觸發(fā)

異步操作
 
 
 
 異步增加 
 異步減少 
 

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

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

最后就是getters

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

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

{{count}}

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

getters算是非常簡單的了。

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

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

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

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

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

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

就像這種

“vuex可以用來做什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！