上上篇：Vuex 入門(mén)
上一篇：Vuex 提升
前兩篇講解了一下 Vuex 的基本使用方法珠漂，可是在實(shí)際項(xiàng)目中那么寫(xiě)肯定是不合理的怜奖，如果組件太多痹筛，不可能把所有組件的數(shù)據(jù)都放到一個(gè) store.js 中的葱椭，所以就需要模塊化的組織 Vuex开泽，首先看一下 項(xiàng)目結(jié)構(gòu)牡拇。
一、首先執(zhí)行以下命令：
vue init webpack-simple vuex-demo
cd vuex-demo
npm install
npm install vuex -S
npm run dev
二穆律、按照上圖結(jié)構(gòu)創(chuàng)建文件目錄
三惠呼、編寫(xiě)文件
我們就延用上兩篇文章中的例子。先說(shuō)一個(gè)各個(gè)文件的作用
types.js 內(nèi)定義常量峦耘，使用常量替代 mutation 事件類型
user.js 內(nèi)寫(xiě)該 user 組件內(nèi)用到的state剔蹋、getters、actions和mutations辅髓，并最后統(tǒng)一導(dǎo)出（類似上個(gè)例子中的 store.js ）
getters.js 內(nèi)寫(xiě)原來(lái)的getters泣崩，用來(lái)獲取屬性
actions.js 內(nèi)寫(xiě)原來(lái)的actions少梁，就是要執(zhí)行的動(dòng)作，如流程的判斷矫付、異步請(qǐng)求
index.js 是用來(lái)組裝 actions.js 凯沪、 getters.js 、user.js 的买优，然后進(jìn)行統(tǒng)一的導(dǎo)出
1. 在 main.js 中導(dǎo)入 index.js 文件并注冊(cè)
import Vue from 'vue'
import App from './App.vue'
import store from './store/index.js'
new Vue({
store,
el: '#app',
render: h => h(App)
})
2. 在 types.js 內(nèi)定義 常量 并導(dǎo)出妨马，默認(rèn)全部大寫(xiě)
// 定義類型常量，默認(rèn)全部大寫(xiě)
const INCREMENT = 'INCREMENT'
const DECREMENT = 'DECREMENT'
export default {
INCREMENT,
DECREMENT
}
注意：把這些常量放在單獨(dú)的文件中可以讓你的代碼合作者對(duì)整個(gè) app 包含的 mutation 一目了然杀赢。用不用常量取決于你——在需要多人協(xié)作的大型項(xiàng)目中烘跺，這會(huì)很有幫助。但如果你不喜歡脂崔，你完全可以不這樣做滤淳。
3. user.js 內(nèi)寫(xiě)該 user 組件內(nèi)用到的 state 、 getters 砌左、 actions 和 mutations
// 導(dǎo)入 types.js 文件
import types from "./../types";
const state ={
count:5
}
// 定義 getters
var getters ={
count(state){
return state.count
}
}
const actions ={
increment({ commit, state }){
// 此處提交的事件與下方 mutations 中的 types.INCREMENT 對(duì)應(yīng)
//與原來(lái) commit('increment') 的原理相同脖咐，只是把類型名換成了常量
commit(types.INCREMENT)
},
decrement({commit,state}){
if (state.count>10) {
// 此處提交的事件與下方 mutations 中的 types.DECREMENT 對(duì)應(yīng)
commit(types.DECREMENT)
}
}
}
const mutations ={
// 此處的事件為上方 actions 中的 commit(types.INCREMENT)
[types.INCREMENT](state){
state.count++
},
// 此處的事件為上方 actions 中的 commit(types.DECREMENT)
[types.DECREMENT](state){
state.count--
}
}
// 最后統(tǒng)一導(dǎo)出
export default {
state,
getters,
actions,
mutations
}
注意：上方
mutations中的[types.INCREMENT]寫(xiě)法，因?yàn)?types.INCREMENT是一個(gè)對(duì)象绊困，所以不能直接當(dāng)做一個(gè)函數(shù)名來(lái)寫(xiě)文搂，需要用到 ES2015 風(fēng)格的計(jì)算屬性命名功能來(lái)使用一個(gè)常量作為函數(shù)名适刀，方能正常使用秤朗，原來(lái)的寫(xiě)法為：
const mutations ={
increment(state){
state.count ++;
}
}
4. getters.js 內(nèi)寫(xiě)原來(lái)的判斷奇偶數(shù)方法
// 因?yàn)閿?shù)據(jù)從 user.js 中獲取，所以需要引入該文件
import user from './modules/user'
const getters = {
isEvenOrOdd(state){
// 注意數(shù)據(jù)是從 user.js 中獲取的笔喉，所以寫(xiě)成 user.state.count
return user.state.count % 2 == 0 ? "偶數(shù)" : "奇數(shù)"
}
}
// 并導(dǎo)出
export default getters;
5. actions.js 內(nèi)寫(xiě)原來(lái)的異步操作
// 異步操作中需要用到 increment 方法取视，所以需要導(dǎo)入 types.js 文件
import types from './types'
const actions= {
incrementAsync({ commit, state }) {
// 異步操作
var p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
}, 3000);
});
p.then(() => {
commit(types.INCREMENT);
}).catch(() => {
console.log('異步操作');
})
}
}
// 最后導(dǎo)出
export default actions;
6. 在 index.js 中組裝 actions.js 、 getters.js 常挚、user.js 的作谭，然后統(tǒng)一導(dǎo)出
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import getters from './getters'
import actions from './actions'
import users from './modules/user'
// 導(dǎo)出 store 對(duì)象
export default new Vuex.Store({
getters,
actions,
modules:{
users
}
})
注意：在導(dǎo)出 store 對(duì)象時(shí)，因?yàn)?
getters和actions在 vuex 的核心概念中有默認(rèn)奄毡，可以直接寫(xiě)入折欠。但是users不是默認(rèn)的，所以用到 vuex 中的 modules 對(duì)象進(jìn)行導(dǎo)出
核心概念
7. Vue.app 文件不作任何修改
<template>
<div id="app">
<button @click="increment">增加</button>
<button @click="decrement">減少</button>
<button @click="incrementAsync">延時(shí)增加</button>
<p>{{count}}</p>
<p>{{isEvenOrOdd}}</p>
</div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
computed:mapGetters([
'count',
'isEvenOrOdd'
]),
methods:mapActions([
'increment',
'decrement',
'incrementAsync'
])
}
</script>
最后吼过，驚心動(dòng)魄的時(shí)候到了锐秦，我這費(fèi)半天勁的東西到底能不能跑起來(lái)
對(duì)于新手們來(lái)說(shuō)，光是看一次可能很難理解這個(gè)過(guò)程盗忱，還是要親自多試一試的酱床，有什么問(wèn)題，歡迎留言趟佃，謝謝觀摩扇谣！
