Vuex單狀態(tài)庫與多模塊狀態(tài)庫詳解

什么情況下使用vuex

創(chuàng)新互聯(lián)企業(yè)建站,十載網(wǎng)站建設(shè)經(jīng)驗(yàn)，專注于網(wǎng)站建設(shè)技術(shù)，精于網(wǎng)頁設(shè)計(jì)，有多年建站和網(wǎng)站代運(yùn)營經(jīng)驗(yàn)，設(shè)計(jì)師為客戶打造網(wǎng)絡(luò)企業(yè)風(fēng)格，提供周到的建站售前咨詢和貼心的售后服務(wù)。對于成都網(wǎng)站制作、做網(wǎng)站中不同領(lǐng)域進(jìn)行深入了解和探索，創(chuàng)新互聯(lián)在網(wǎng)站建設(shè)中充分了解客戶行業(yè)的需求，以靈動的思維在網(wǎng)頁中充分展現(xiàn)，通過對客戶行業(yè)精準(zhǔn)市場調(diào)研，為客戶提供的解決方案。

Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，如果您不打算開發(fā)大型單頁應(yīng)用，使用 Vuex 可能是繁瑣冗余的。如果您需要構(gòu)建是一個(gè)中大型單頁應(yīng)用，您很可能會考慮如何更好地在組件外部管理狀態(tài)，Vuex 將會成為自然而然的選擇。

之前在做旅游頁的時(shí)候?qū)?Vuex 進(jìn)行了簡單的了解。近期在做 Vue 項(xiàng)目的同時(shí)重新學(xué)習(xí)了 Vuex 。本篇博文主要總結(jié)一下 Vuex 單狀態(tài)庫和多模塊 modules 的兩類使用場景。

本篇所有代碼是基于 Vue-Cli 3.x 版本的腳手架工具進(jìn)行編寫的。

vuex 單狀態(tài)庫 Demo

這是一個(gè)僅有單個(gè) Vuex store 狀態(tài)庫的 Demo。當(dāng)項(xiàng)目中使用一個(gè) Vuex 狀態(tài)庫就已經(jīng)足夠的時(shí)候，可以使用這種方式。

本 Demo 使用了一個(gè) increment 與 decrement 的增 / 減事件來體現(xiàn) store 數(shù)據(jù)的變化。

store.js

由于狀態(tài)庫是單一的，僅有一個(gè) store.js 文件管理狀態(tài)庫。在該文件中一開始進(jìn)行 import 的引入，然后使用 Vue.use(Vuex) 使用 Vuex，之后分別定義 state、mutations 和 actions，并通過 export default new Vuex.Store({state, mutations, actions}) 模塊化。

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
 count: 1
}

const mutations = {
 increment(state) {
  state.count ++
 },
 decrement(state) {
  state.count --
 }
}

const actions = {
 increment:({commit}) => {
  commit('increment')
 },
 decrement:({commit}) => {
  commit('decrement')
 }
}

export default new Vuex.Store({state, mutations, actions})

main.js

在入口文件 main.js 中通過 import 引入 store，并注冊到 Vue 的實(shí)例上。

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

// Vue-Cli 3.x
new Vue({
 render: h => h(App),
 router,
 store
}).$mount('#app')

// Vue-Cli 2.x
// new Vue({
//  el: '#app',
//  router,
//  store,
//  components: { App },
//  template: '<App/>'
// })

使用 $store

在相應(yīng)的組件中如下引入并在 methods 中使用 mapActions。

<template>
 <div class="vuex">
  Vuex 全局 Store count {{$store.state.count}}
  <button type="button" name="button" @click="increment">加</button>
  <button type="button" name="button" @click="decrement">減</button>
 </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
 methods: mapActions([
  'increment',
  'decrement'
 ])
}
</script>

<style scoped>

</style>

Demo

關(guān)于單狀態(tài)庫的 Demo 請參考此 github

Github Demo

vuex 多模塊狀態(tài)庫 Demo

當(dāng)項(xiàng)目變得非常龐大，單個(gè) store 無法滿足需求的時(shí)候，可以通過多模塊狀態(tài)庫管理多個(gè) store，將各類狀態(tài)分類進(jìn)行維護(hù)。

本 Demo 使用了 add 與 reduce 的增 / 減事件來體現(xiàn) store 數(shù)據(jù)的變化。

store

由于需要管理多個(gè) store，因此在項(xiàng)目目錄中創(chuàng)建 store 文件夾，并創(chuàng)建 modules 文件夾用來放置各個(gè) store文件，并使用 index.js 作為入口文件。具體結(jié)構(gòu)請查看 Demo。

main.js

同樣在 main.js 中通過 import 引入 store，但這里是引入 index.js 這個(gè)入口文件。

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

使用 $store

除了使用方式有一定不同之外，methods 中的 mapActions 也更換了書寫方式，第一個(gè)參數(shù)是對應(yīng) store 管理的數(shù)據(jù)，第二個(gè)參數(shù)是關(guān)于操作事件的數(shù)組。

<template lang="html">
 <div class="a">
  page a {{$store.state.countA.countA}}

  <button type="button" name="button" @click="add">增加</button>
  <button type="button" name="button" @click="reduce">刪減</button>
 </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
 methods: mapActions('countA',['add','reduce'])
}
</script>

<style lang="css">
</style>

Demo

關(guān)于多模塊狀態(tài)庫的 Demo 請參考此 github

Github Demo

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

當(dāng)前名稱：Vuex單狀態(tài)庫與多模塊狀態(tài)庫詳解
標(biāo)題路徑：http://muchs.cn/article20/gpjpco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、面包屑導(dǎo)航、移動網(wǎng)站建設(shè)、動態(tài)網(wǎng)站、網(wǎng)站制作、網(wǎng)站排名

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

猜你還喜歡下面的內(nèi)容