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

2019-11-19 14:53:06

字體：大中小

來源：轉載

供稿：網友

前言

Vuex 強調使用單一狀態樹，即在一個項目里只有一個 store，這個 store 集中管理了項目中所有的數據以及對數據的操作行為。但是這樣帶來的問題是 store 可能會非常臃腫龐大不易維護，所以就需要對狀態樹進行模塊化的拆分。

這篇文章預設你已經了解vue相關的基礎知識，因此本文不再贅述。需要學習的朋友可以參考這篇文章://m.survivalescaperooms.com/article/110212.htm

對vuex的定位和解釋可以看官方文檔，說的很詳細了，需要的朋友也可以通過這篇文章進行詳細的了解：//m.survivalescaperooms.com/article/111582.htm

本文主要從實用的角度寫一寫如何在實際項目中使用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.jsconst CHANGE_COUNT = 'CHANGE_COUNT';export default { CHANGE_COUNT}

// mutation.jsimport type from './mutation-type'let mutations = { [type.CHANGE_COUNT](state) { state.count++ }}export default mutations

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

// action.jsimport 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.jsconst 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，這個很簡單，在頁面中這樣寫就行：