https://www.cnblogs.com/chinabin1993/p/9848720.html
這段時(shí)間一直在用vue寫項(xiàng)目，vuex在項(xiàng)目中也會(huì)依葫蘆畫瓢使用氏淑，但是總有一種朦朦朧朧的感覺锚烦。于是決定徹底搞懂它降允。
看了一下午的官方文檔，以及資料只损，才發(fā)現(xiàn)vuex so easy反肋！
作為一個(gè)圈子中的人，決定輸出一下文檔贷笛，如果你仔細(xì)看完這篇文章应又，保證你對(duì)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)的五種基本的對(duì)象：
state：存儲(chǔ)狀態(tài)（變量）
getters：對(duì)數(shù)據(jù)獲取之前的再次編譯革娄，可以理解為state的計(jì)算屬性倾贰。我們?cè)诮M件中使用 $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
接下來我們?cè)趕rc目錄下創(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 defaultnew Vuex.Store({
? ? state
})
接下來撩鹿，在main.js中引入store
import Vue from 'vue'import App from './App'import router from './router'import store from './vuex/store' // 引入storeVue.config.productionTip =false/* eslint-disable no-new */new Vue({
? ? el: '#app',
? ? router,
? ? store,
? ? components: { App },
? ? template: ''})
然我我們?cè)谌我庖粋€(gè)組件中就可以使用我們定義的count屬性了。
這里我們?cè)趆elloWorld中使用一下悦屏，去除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很簡(jiǎn)單吧？
回想一下看蚜，我們只需要在下載安裝使用vuex叫搁，在我們定義的store.js中定義state對(duì)象，并且暴露出去供炎。
在main.js中使用我們的store.js（這里是為了防止在各個(gè)組件中引用常熙，因?yàn)閙ain.js中，有我們的new Vue 實(shí)例凹钭隆！）
現(xiàn)在我們已經(jīng)使用了vuex中的state仿贬，接下來我們?nèi)绾尾僮鬟@個(gè)值呢纽竣？ 沒錯(cuò)！用mutations和actions
我們繼續(xù)操作store.js文件
我們?cè)趕otre.js中定義mutations對(duì)象茧泪，該對(duì)象中有兩個(gè)方法蜓氨，mutations里面的參數(shù)，第一個(gè)默認(rèn)為state队伟，接下來的為自定義參數(shù)穴吹。
我們?cè)趍utations中定義兩個(gè)方法，增加和減少嗜侮，并且設(shè)置一個(gè)參數(shù)n港令，默認(rèn)值為0，然后在Vuex.Store中使用它
/**
* mutations 里面放置的是我們操作state對(duì)象屬性的方法
*/const mutations = {
? ? mutationsAddCount(state, n = 0) {
? ? ? ? return(state.count += n)
? ? },
? ? mutationsReduceCount(state, n = 0) {
? ? ? ? return(state.count -= n)
? ? }
}
export defaultnew Vuex.Store({
? ? state,
? ? mutations
})
然后我們?cè)趆elloWorld.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對(duì)象朵纷，并且使用
這里我在兩個(gè)方法中使用了兩個(gè)不同的參數(shù)炭臭，一個(gè)是context，它是一個(gè)和store對(duì)象具有相同對(duì)象屬性的參數(shù)袍辞。在第二個(gè)函數(shù)中鞋仍，我是直接使用了這個(gè)對(duì)象的commit的方法。
憑大家喜好就行
const actions = {
? ? actionsAddCount(context, n = 0) {
? ? ? ? console.log(context)
? ? ? ? returncontext.commit('mutationsAddCount', n)
? ? },
? ? actionsReduceCount({ commit }, n = 0) {
? ? ? ? returncommit('mutationsReduceCount', n)
? ? }
}
export defaultnew 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 defaultnew Vuex.Store({
? ? state,
? ? mutations,
? ? actions,
? ? getters
})
<h4>{{count}}</h4>
const getters = {
? ? getterCount(state) {
? ? ? ? return(state.count += 10)
? ? }
}
getters算是非常簡(jiǎn)單的了那婉。
到這里，如果全都看懂了党瓮，vuex你已經(jīng)沒有壓力了详炬。
但是vuex官方給了我們一個(gè)更簡(jiǎn)單的方式來使用vuex， 也就是 {mapState, mapMutations, mapActions, mapGetters}
只要我們把上面基礎(chǔ)的搞懂寞奸，這些都不在話下呛谜，只是方面我們書寫罷了。
就這么簡(jiǎn)單枪萄，這里我們用到了es6的擴(kuò)展運(yùn)算符隐岛。如果不熟悉的同學(xué)還是去看看阮一峰大神的《Es6標(biāo)準(zhǔn)入門》這本書，我是看完了瓷翻，受益匪淺聚凹！
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(){
? ? ? returnthis.$store.getters.getterCount
? ? }
? }
}
同理，getters和 state也可以使用 mapState齐帚，mapGetters
如果你更懶的話妒牙，我們可以使用數(shù)組，而非對(duì)象对妄，或者es6里面的對(duì)象簡(jiǎn)寫方式
就像這種
最后湘今，如果大家發(fā)現(xiàn)有什么問題，或者錯(cuò)誤的地方剪菱，歡迎留言交流摩瞎。
如果你的才華還實(shí)現(xiàn)不了你的野心，那就靜下心來孝常，埋頭苦干愉豺。有志者事竟成破釜成舟百二秦關(guān)終屬楚，苦心人天不負(fù)臥薪嘗膽三千越甲可吞吳茫因！
