簡化vuex的狀態(tài)管理方案的方法

更新時(shí)間：2018年06月02日 08:41:38 作者：Myron

在 vuejs 相關(guān)項(xiàng)目開發(fā)過程中，我們常常會(huì)使用 vuex 作為狀態(tài)管理工具, 整個(gè)組件的狀態(tài)做為單向數(shù)據(jù)流的模式管理，這篇文章主要介紹了簡化vuex的狀態(tài)管理方案的方法，感興趣的小伙伴們可以參考一下

在 vuejs 相關(guān)項(xiàng)目開發(fā)過程中，我們常常會(huì)使用 vuex 作為狀態(tài)管理工具, 整個(gè)組件的狀態(tài)做為單向數(shù)據(jù)流的模式管理。

事實(shí)上，在實(shí)際的使用中 vuex 可以說是相當(dāng)繁瑣的，每一次的需求增加需要增加 Mutations-Type 、 Action 和 Mutations , 為了簡化這一操作，我們可以將 mutations 和 action 合并，簡化流程如下：

在此種思想的引導(dǎo)下, muse-model 誕生了，以簡單優(yōu)雅的方式完成整個(gè)項(xiàng)目的狀態(tài)管理。

什么是 muse-model

muse-model 并不是一個(gè)全新的狀態(tài)管理工具，它是基于 vuex 開發(fā)，可以說是 vuex 的一個(gè)輔助工具，在使用 muse-model 過程中，vuex 的一切 API 都是可以用的，這也方便了vuex 的用戶進(jìn)行過度。在初始化 muse-model 是也是需要傳入 store 對(duì)象。

// model.js
import Vue from 'vue';
import Vuex from 'vuex';
import MuseModel from 'muse-model';

export const store = Vuex.Store({
 strict: true
});

export default new MuseModel(store);

使用

我們將以一個(gè)計(jì)數(shù)器的例子來演示 muse-model 的使用。

定義一個(gè) model

model 由 namespace 、 state 、 action 三個(gè)部分組成

// count.js
export default {
  namespace: 'demo',
  state: {
    count: 1
  },
  add () {
    return {
      count: this.state.count + 1
    }
  },
  sub () {
    return {
      count: this.state.count - 1
    }
  }
}

不要再 action 中直接改變狀態(tài)，而是通過 return 返回需要改變的新的狀態(tài).

連接組件

通過 connect 方法可以將 model 混入到組件的 computed 和 methods 中。

<template>
<div>
  <button@click="add">+</button>
  {{count}}
  <button@click="sub">-</button>
</div>
</template>
<script>
import model from './model';
import CountModel from './count';
const CountUI = {
  name: 'count-ui'
};

export default model.connect(CountUI, CountModel);
</script>

處理異步

關(guān)于異步處理只需要返回 promise 對(duì)象即可。

export default {
  //....
  addTimeOut () { // 異步處理
    return new Promise((resolve, reject) => {
     setTimeout(() => {
      resolve({
       count: this.state.count + 1
      });
     }, 1000);
    });
  }
}

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue實(shí)現(xiàn)遠(yuǎn)程獲取路由與頁面刷新導(dǎo)致404錯(cuò)誤的解決
這篇文章主要介紹了Vue實(shí)現(xiàn)遠(yuǎn)程獲取路由與頁面刷新導(dǎo)致404錯(cuò)誤的解決，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-01-01
vue實(shí)現(xiàn)移動(dòng)端圖片上傳功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端圖片上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-12-12
VScode更新后安裝vetur仍無法格式化vue文件的解決
這篇文章主要介紹了VScode更新后安裝vetur仍無法格式化vue文件的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
Vue3中Hooks函數(shù)的使用及封裝思想詳解
Vue?3中的Hooks函數(shù)是一種用于在組件中共享可復(fù)用邏輯的方式，簡單來說，就是將單獨(dú)功能的js代碼抽離出來，?加工成公共函數(shù)，從而達(dá)到邏輯復(fù)用，下面小編就來和大家聊聊Hooks函數(shù)的使用及封裝思想吧
2023-06-06
詳解Vue適時(shí)清理keepalive緩存方案
說到Vue緩存，我們肯定首先選擇官方提供的緩存方案keep-alive，本文主要介紹了詳解Vue適時(shí)清理keepalive緩存方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-07-07
vue項(xiàng)目中使用pinyin轉(zhuǎn)換插件方式
這篇文章主要介紹了vue項(xiàng)目中使用pinyin轉(zhuǎn)換插件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue不通過路由直接獲取url中參數(shù)的方法示例
通過url傳遞參數(shù)是我們?cè)陂_發(fā)中經(jīng)常用到的一種傳參方法，但通過url傳遞后改如果獲取呢？下面這篇文章主要給大家介紹了關(guān)于vue如何不通過路由直接獲取url中參數(shù)的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-08-08
vue使用window.open()跳轉(zhuǎn)頁面的代碼案例
這篇文章主要介紹了vue中對(duì)window.openner的使用,vue使用window.open()跳轉(zhuǎn)頁面的代碼案例，本文通過實(shí)例代碼給大家詳細(xì)講解，需要的朋友可以參考下
2022-11-11
vue3實(shí)現(xiàn)無縫滾動(dòng)列表效果(大屏數(shù)據(jù)輪播場景)
vue3-scroll-seamless 是一個(gè)用于 Vue 3 的插件,用于實(shí)現(xiàn)無縫滾動(dòng)的組件,它可以讓內(nèi)容在水平或垂直方向上無縫滾動(dòng),適用于展示輪播圖、新聞滾動(dòng)、圖片展示等場景,本文就給大家介紹了vue3實(shí)現(xiàn)無縫滾動(dòng)列表效果,需要的朋友可以參考下
2024-07-07
關(guān)于在vue2中使用weixin-js-sdk的詳細(xì)步驟
公司最近有微信公眾號(hào)的需求,那么微信登錄授權(quán)和如何使用WX-JSSDk實(shí)現(xiàn)分享等等肯定是最頭疼的問題,這篇文章主要給大家介紹了關(guān)于在vue2中使用weixin-js-sdk的詳細(xì)步驟,需要的朋友可以參考下
2024-07-07