快捷導(dǎo)航

通過一個簡單的例子學(xué)會vuex與模塊化

更新時間：2017年11月22日 09:15:58 作者：蘇簡

這篇文章主要給大家介紹了關(guān)于如何通過一個簡單的例子學(xué)會vuex與模塊化的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。

前言

Vuex 強(qiáng)調(diào)使用單一狀態(tài)樹，即在一個項(xiàng)目里只有一個 store，這個 store 集中管理了項(xiàng)目中所有的數(shù)據(jù)以及對數(shù)據(jù)的操作行為。但是這樣帶來的問題是 store 可能會非常臃腫龐大不易維護(hù)，所以就需要對狀態(tài)樹進(jìn)行模塊化的拆分。

這篇文章預(yù)設(shè)你已經(jīng)了解vue相關(guān)的基礎(chǔ)知識，因此本文不再贅述。需要學(xué)習(xí)的朋友可以參考這篇文章:http://www.dbjr.com.cn/article/110212.htm

對vuex的定位和解釋可以看官方文檔，說的很詳細(xì)了，需要的朋友也可以通過這篇文章進(jìn)行詳細(xì)的了解：http://www.dbjr.com.cn/article/111582.htm

本文主要從實(shí)用的角度寫一寫如何在實(shí)際項(xiàng)目中使用vuex，例子真的很簡單（簡陋），但是主要是理解這種思維就好。

示例教程

例子是在vue-cli基礎(chǔ)上構(gòu)建的，以下是src文件下的內(nèi)容目錄。

├── App.vue
├── components // 組件文件夾
│ ├── tab1.vue
│ ├── tab2.vue
│ ├── tab3.vue
│ └── tab4.vue
├── main.js // vue的主文件入口
├── router // vue-router文件
│ └── index.js
└── store // vuex文件
 ├── action.js // action
 ├── getter.js // getter
 ├── index.js // vuex的主文件
 ├── module // 模塊文件
 │ ├── tab2.js
 │ └── tab3.js
 ├── mutation-type.js // mutation常量名文件
 └── mutation.js // mutation

效果是這樣的（不要嫌棄簡陋啊啊?。?/p>

在這個例子里，把文檔里提到的vuex的相關(guān)知識都使用了一遍，包括模塊相關(guān)的知識，基本把一般的使用場景都覆蓋了吧。

那不廢話了，開始吧。

首先app.vue和router兩部分是和路由相關(guān)，就是很簡單的東西，看看文檔就能了解。

vuex的模塊化

在寫這個例子之前看了很多的開源項(xiàng)目的代碼，一開始蠻新鮮的，畢竟之前項(xiàng)目中并沒有深度使用過vuex，基本就是一個store.js里把vuex的功能就都完成了，但是項(xiàng)目復(fù)雜肯定不能這么寫，正好現(xiàn)在有這個需求，我就想寫個例子理一理這方面的思路。結(jié)果還是蠻簡單的。

store文件里的內(nèi)容就是按照vuex五個核心概念建立的，這么做的好處對于梳理業(yè)務(wù)邏輯和后期維護(hù)都是極大的方便，比如mutation.js和mutation-type.js這兩個文件：

// mutation-type.js

const CHANGE_COUNT = 'CHANGE_COUNT';


export default {
 CHANGE_COUNT
}

// mutation.js

import type from './mutation-type'

let mutations = {
 [type.CHANGE_COUNT](state) {
 state.count++
 }
}

export default mutations

將mutation中的方法名單獨(dú)作為常量提取出來，放在單獨(dú)的文件中，用的時候引用相關(guān)的內(nèi)容，這樣非常便于管理和了解有哪些方法存在，很直觀。另一方面，有時候可能需要用到action，可以使用相同的方法名，只要再引入常量的文件就行。

// action.js
import type from './mutation-type'

let actions = {
 [type.CHANGE_COUNT]({ commit }) {
 
 commit(type.CHANGE_COUNT)
 
 }
}

export default actions

怎么樣，這樣是不是看起來就沒有寫在一個文件里那么亂了。

...mapGetters和...mapActions

tab1.vue里：

// tab1.vue
<template>
 <div>
 <p>這是tab1的內(nèi)容</p>
 <em @click="add">{{count}}</em>
 <p>getter:{{NewArr}}</p>
 </div>
</template>


<script>
import { mapActions, mapGetters } from "vuex";
import type from "../store/mutation-type";
export default {
 computed: {
 ...mapGetters([
 'NewArr'
 ]),
 count: function() {
 return this.$store.state.count;
 },
 },
 methods: {
 ...mapActions({
 CHANGE_COUNT: type.CHANGE_COUNT
 }),
 add: function() {
 this.CHANGE_COUNT(type.CHANGE_COUNT);
 }
 }
};
</script>

<style lang="" scoped>

</style>

index.js文件里：

import Vuex from 'vuex'
import Vue from 'vue'
import actions from './action'
import mutations from './mutation'
import getters from './getter'
import tab2 from './module/tab2'
import tab3 from './module/tab3'

Vue.use(Vuex)

let state = {
 count: 1,
 arr:[]
}


let store = new Vuex.Store({
 state,
 getters,
 mutations,
 actions,
 modules:{
 tab2,tab3
 }
 
})

export default store

vuex提供了一種叫做輔助函數(shù)的東西，他的好處能讓你在一個頁面集中展示一些需要用到的東西，并且在使用的時候也可以少寫一些內(nèi)容，不過這個不是必須，根據(jù)自己需要取用。

需要說明的是，他們兩個生效的地方可不一樣。

...mapGetters寫在本頁面的計(jì)算屬性中，之后就可以像使用計(jì)算屬性一樣使用getters里的內(nèi)容了。

...mapActions寫在本頁面的methods里面,既可以在其他方法里調(diào)用，甚至可以直接寫在@click里面，像這樣：

<em @click="CHANGE_COUNT">{{count}}</em>

醬紫，tab1里面的數(shù)字每次點(diǎn)擊都會自增1。

mudule

vuex的文檔里對于模塊這部分寫的比較模糊，還是得自己實(shí)際使用才能行。

在本例子中，我設(shè)置了兩個模塊：tab2和tab3，分別對應(yīng)著同名的兩個組件，當(dāng)然，我這樣只是為了測試，實(shí)際看tab2就可以。

// module/tab2.js
const tab2 = {
 state: {
 name:`這是tab2模塊的內(nèi)容`
 },
 mutations:{
 change2(state){
  state.name = `我修改了tab2模塊的內(nèi)容`
 }
 },
 getters:{
 name(state,getters,rootState){
  console.log(rootState)
  return state.name + ',使用getters修改'
 }
 }
}

export default tab2;

// tab2.vue
<template>
 <div>
 <p>這是tab2的內(nèi)容</p>
 <strong @click="change">點(diǎn)擊使用muttion修改模塊tab2的內(nèi)容：{{info}}</strong>
 <h4>{{newInfo}}</h4>
 </div>
</template>


<script>
export default {
 mounted() {
 // console.log(this.$store.commit('change2'))
 },
 computed: {
 info: function() {
 return this.$store.state.tab2.name;
 },
 newInfo(){
 return this.$store.getters.name;
 }
 },
 methods: {
 change() {
 this.$store.commit('change2')
 }
 }
};
</script>

<style lang="" scoped>

</style>

這個例子里主要是看怎么在頁面中調(diào)用模塊中的stated等。

首先說state，這個很簡單，在頁面中這樣寫就行：