Vuex中模塊化組織的示例分析

這篇文章主要為大家展示了“Vuex中模塊化組織的示例分析”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Vuex中模塊化組織的示例分析”這篇文章吧。

廉江網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)公司！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)公司2013年至今到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)公司。

在實(shí)際項(xiàng)目中如果組件太多，就需要模塊化的組織 Vuex，首先看一下 項(xiàng)目結(jié)構(gòu)。

 

項(xiàng)目結(jié)構(gòu)

一、首先執(zhí)行以下命令：

vue init webpack-simple vuex-demo
cd vuex-demo
npm install
npm install vuex -S
npm run dev

二、按照上圖結(jié)構(gòu)創(chuàng)建文件目錄

Vuex 模塊化目錄

三、編寫文件

我們就延用上兩篇文章中的例子。先說一個(gè)各個(gè)文件的作用

types.js 內(nèi)定義常量，使用常量替代 mutation 事件類型

user.js 內(nèi)寫該 user 組件內(nèi)用到的 state 、 getters 、 actions 和 mutations，并最后統(tǒng)一導(dǎo)出（類似上個(gè)例子中的 store.js ）

getters.js 內(nèi)寫原來的 getters ，用來獲取屬性

actions.js 內(nèi)寫原來的 actions ，就是要執(zhí)行的動(dòng)作，如流程的判斷、異步請(qǐng)求

index.js 是用來組裝 actions.js 、 getters.js 、user.js 的，然后進(jìn)行統(tǒng)一的導(dǎo)出

1. 在 main.js 中導(dǎo)入 index.js 文件并注冊(cè)

import Vue from 'vue'
import App from './App.vue'
import store from './store/index.js'

new Vue({
 store,
 el: '#app',
 render: h => h(App)
})

2. 在 types.js 內(nèi)定義 常量 并導(dǎo)出，默認(rèn)全部大寫

// 定義類型常量，默認(rèn)全部大寫
const INCREMENT = 'INCREMENT'
const DECREMENT = 'DECREMENT'

export default {
  INCREMENT,
  DECREMENT
}

注意：把這些常量放在單獨(dú)的文件中可以讓你的代碼合作者對(duì)整個(gè) app 包含的 mutation 一目了然。用不用常量取決于你——在需要多人協(xié)作的大型項(xiàng)目中，這會(huì)很有幫助。但如果你不喜歡，你完全可以不這樣做。

3. user.js 內(nèi)寫該 user 組件內(nèi)用到的 state 、 getters 、 actions 和 mutations

// 導(dǎo)入 types.js 文件
import types from "./../types";

const state ={
  count:5
}

// 定義 getters
var getters ={
  count(state){
    return state.count
  }
}

const actions ={
  increment({ commit, state }){
    // 此處提交的事件與下方 mutations 中的 types.INCREMENT 對(duì)應(yīng)，與原來 commit('increment') 的原理相同，只是把類型名換成了常量
    commit(types.INCREMENT)
  },
  decrement({commit,state}){
    if (state.count>10) {
      // 此處提交的事件與下方 mutations 中的 types.DECREMENT 對(duì)應(yīng)
      commit(types.DECREMENT)
    }
  }
}

const mutations ={
  // 此處的事件為上方 actions 中的 commit(types.INCREMENT)
  [types.INCREMENT](state){
    state.count++
  },
  // 此處的事件為上方 actions 中的 commit(types.DECREMENT)
  [types.DECREMENT](state){
    state.count--
  }
}
// 最后統(tǒng)一導(dǎo)出
export default {
  state,
  getters,
  actions,
  mutations
}

注意：上方 mutations 中的 [types.INCREMENT] 寫法，因?yàn)?types.INCREMENT 是一個(gè)對(duì)象，所以不能直接當(dāng)做一個(gè)函數(shù)名來寫，需要用到 ES2015 風(fēng)格的計(jì)算屬性命名功能來使用一個(gè)常量作為函數(shù)名，方能正常使用，原來的寫法為：

const mutations ={
  increment(state){
    state.count ++;
  }
}

4. getters.js 內(nèi)寫原來的判斷奇偶數(shù)方法

// 因?yàn)閿?shù)據(jù)從 user.js 中獲取，所以需要引入該文件
import user from './modules/user'

const getters = {
  isEvenOrOdd(state){
    // 注意數(shù)據(jù)是從 user.js 中獲取的，所以寫成 user.state.count
    return user.state.count % 2 == 0 ? "偶數(shù)" : "奇數(shù)"
  }
}
// 并導(dǎo)出
export default getters;

5. actions.js 內(nèi)寫原來的異步操作

// 異步操作中需要用到 increment 方法，所以需要導(dǎo)入 types.js 文件
import types from './types'
const actions= {
  incrementAsync({ commit, state }) {
    // 異步操作
    var p = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve()
      }, 3000);
    });
    p.then(() => {
      commit(types.INCREMENT);
    }).catch(() => {
      console.log('異步操作');
    })
  }
}
// 最后導(dǎo)出
export default actions;

6. 在 index.js 中組裝 actions.js 、 getters.js 、user.js 的，然后統(tǒng)一導(dǎo)出

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import getters from './getters'
import actions from './actions'
import users from './modules/user'
// 導(dǎo)出 store 對(duì)象
export default new Vuex.Store({
  getters,
  actions,
  modules:{
    users
  }
})

注意：在導(dǎo)出 store 對(duì)象時(shí)，因?yàn)?getters 和 actions 在 vuex 的核心概念中有默認(rèn)，可以直接寫入。但是 users 不是默認(rèn)的，所以用到 vuex 中的 modules 對(duì)象進(jìn)行導(dǎo)出

核心概念

7. Vue.app 文件不作任何修改

<template>
 <div id="app">
  <button @click="increment">增加</button>
  <button @click="decrement">減少</button>
  <button @click="incrementAsync">延時(shí)增加</button>
  <p>{{count}}</p>
  <p>{{isEvenOrOdd}}</p>
 </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
 name: 'app',
 data () {
  return {
   msg: 'Welcome to Your Vue.js App'
  }
 },
 computed:mapGetters([
  'count',
  'isEvenOrOdd'
 ]),
 methods:mapActions([
  'increment',
  'decrement',
  'incrementAsync'
 ])
}
</script>

最后，驚心動(dòng)魄的時(shí)候到了，我這費(fèi)半天勁的東西到底能不能跑起來

以上是“Vuex中模塊化組織的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享文章：Vuex中模塊化組織的示例分析
本文URL：http://muchs.cn/article30/gddiso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、做網(wǎng)站、微信公眾號(hào)、外貿(mào)建站、商城網(wǎng)站、定制開發(fā)

廣告

聲明：本網(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)