用一個簡單的例子弄懂vuex和模塊化

這篇文章預設你已經瞭解vue相關的基礎知識，所以本文再也不贅述。

對vuex的定位和解釋能夠看官方文檔，說的很詳細了，我主要從實用的角度寫一寫如何在實際項目中使用vuex，例子真的很簡單（簡陋），可是主要是理解這種思惟就好。

例子是在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>
   <div>
        <p>這是tab1的內容</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提供了一種叫作輔助函數的東西，他的好處能讓你在一個頁面集中展現一些須要用到的東西，而且在使用的時候也能夠少寫一些內容，不過這個不是必須，根據本身須要取用。

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

...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>
   <div>
        <p>這是tab2的內容</p>
        <strong @click="change">點擊使用muttion修改模塊tab2的內容：{{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>

這個例子裏主要是看怎麼在頁面中調用模塊中的stated等。

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

this.$store.steta.tab2(模塊名).name

在本頁面的mounted中console一下$store是這樣的：

能夠看到模塊中的stete加了一層嵌套在state中的。

至於action,mutation,getter，和通常的使用方法同樣，沒有任何區別。

還有就是，在getter和action中，能夠經過rootState得到根結構的state，mutation中沒有此方法。