快捷導(dǎo)航

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

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

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

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

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

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

什么是 muse-model

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

// 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);

使用

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

定義一個 model

model 由 namespace 、 state 、 action 三個部分組成

// 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 對象即可。

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

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

您可能感興趣的文章:

相關(guān)文章

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