這篇文章將為大家詳細(xì)講解有關(guān)vuex與模塊化的示例分析，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)于2013年創(chuàng)立，先為酉陽(yáng)土家族苗族等服務(wù)建站，酉陽(yáng)土家族苗族等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為酉陽(yáng)土家族苗族企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

示例教程

例子是在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

效果是這樣的（不要嫌棄簡(jiǎn)陋啊啊啊）

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

那不廢話了，開始吧。

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

vuex的模塊化

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

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

// 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ú)的文件中，用的時(shí)候引用相關(guān)的內(nèi)容，這樣非常便于管理和了解有哪些方法存在，很直觀。另一方面，有時(shí)候可能需要用到action，可以使用相同的方法名，只要再引入常量的文件就行。

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

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

export default actions

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

...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ù)的東西，他的好處能讓你在一個(gè)頁(yè)面集中展示一些需要用到的東西，并且在使用的時(shí)候也可以少寫一些內(nèi)容，不過這個(gè)不是必須，根據(jù)自己需要取用。

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

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

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

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

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

mudule

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

在本例子中，我設(shè)置了兩個(gè)模塊：tab2和tab3，分別對(duì)應(yīng)著同名的兩個(gè)組件，當(dāng)然，我這樣只是為了測(cè)試，實(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>
 <h5>{{newInfo}}</h5>
 </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>

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

首先說state，這個(gè)很簡(jiǎn)單，在頁(yè)面中這樣寫就行：

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

在本頁(yè)面的mounted中console一下$store,可以看到模塊中，stete加了一層嵌套在state中的。

至于action,mutation,getter，和一般的使用方法一樣，沒有任何區(qū)別。

還有就是，在getter和action中，可以通過rootState獲得根結(jié)構(gòu)的state，mutation中沒有此方法。

關(guān)于“vuex與模塊化的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

當(dāng)前文章：vuex與模塊化的示例分析
分享鏈接：http://chinadenli.net/article10/ghocgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷、網(wǎng)站設(shè)計(jì)公司、、網(wǎng)站改版、營(yíng)銷型網(wǎng)站建設(shè)、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)