學會簡單的vuex與模組化-js教程-PHP中文網

Vuex 強調使用單一狀態樹，也就是在一個專案裡只有一個 store，這個 store 集中管理了專案中所有的資料以及對資料的操作行為。但這樣帶來的問題是 store 可能會非常臃腫龐大不易維護，所以就需要對狀態樹進行模組化的分割。

範例教學

範例是在vue-cli基礎上建構的，以下是src檔案下的內容目錄。

├── 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

登入後複製

效果是這樣的（不要嫌棄簡陋啊啊啊）

#在這個例子裡，把文檔裡提到的vuex的相關知識都使用了一遍，包括模組相關的知識，基本上把一般的使用場景都覆蓋了吧。

那不廢話了，開始吧。

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

vuex的模組化

在寫這個例子之前看了很多的開源專案的程式碼，一開始蠻新鮮的，畢竟之前專案中並沒有深度使用過vuex，基本上就是一個store.js把vuex的功能就都完成了，但是專案複雜肯定不能這麼寫，剛好現在有這個需求，我就想寫個例子理一理這方面的思路。結果還是蠻簡單的。

store檔案裡的內容就是按照vuex五個核心概念建立的，這麼做的好處對於梳理業務邏輯和後期維護都是極大的方便，例如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中的方法名稱單獨作為常數提取出來，放在單獨的檔案中，用的時候引用相關的內容，這樣非常便於管理和了解有哪些方法存在，很直觀。另一方面，有時候可能需要用到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>
 <p>
 <p>这是tab1的内容</p>
 <em @click="add">{{count}}</em>
 <p>getter:{{NewArr}}</p>
 </p>
</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提供了一種叫做輔助函數的東西，他的好處能讓你在一個頁面集中展示一些需要用到的東西，並且在使用的時候也可以少寫一些內容，不過這個不是必須，根據自己需要取用。

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

...mapGetters寫在本頁面的計算屬性中，之後就可以像使用計算屬性一樣使用getters裡的內容了。

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

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

登入後複製

醬紫，tab1裡面的數字每次點擊都會自增1。

mudule

vuex的文檔裡對於模組這部分寫的比較模糊，還是得自己實際使用才能行。

在這個例子中，我設定了兩個模組：tab2和tab3，分別對應著同名的兩個元件，當然，我這樣只是為了測試，實際看tab2就可以。

// module/tab2.js
const tab2 = {
 state: {
 name:`这是tab2模块的内容`
 },
 mutations:{
 change2(state){
  state.name = `我修改了tab2模块的内容`
 }
 },
 getters:{
 name(state,getters,rootState){
  console.log(rootState)
  return state.name + ',使用getters修改'
 }
 }
}

export default tab2;

登入後複製

// tab2.vue
<template>
 <p>
 <p>这是tab2的内容</p>
 <strong @click="change">点击使用muttion修改模块tab2的内容：{{info}}</strong>
 <h4>{{newInfo}}</h4>
 </p>
</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>

登入後複製

這個例子裡主要是看怎麼在頁面中呼叫模組中的stated等。

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