简化vuex的状态管理方案的方法


Posted in Javascript onJune 02, 2018

在 vuejs 相关项目开发过程中,我们常常会使用 vuex 作为状态管理工具, 整个组件的状态做为单向数据流的模式管理。

简化vuex的状态管理方案的方法

事实上,在实际的使用中 vuex 可以说是相当繁琐的,每一次的需求增加需要增加 Mutations-Type Action Mutations , 为了简化这一操作,我们可以将 mutations 和 action 合并,简化流程如下:

简化vuex的状态管理方案的方法

在此种思想的引导下, muse-model 诞生了,以简单优雅的方式完成整个项目的状态管理。

什么是 muse-model

muse-model 并不是一个全新的状态管理工具, 它是基于 vuex 开发,可以说是 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);

使用

我们将以一个计数器的例子来演示 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 中直接改变状态,而是通过 return 返回需要改变的新的状态.

连接组件

通过 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>

处理异步

关于异步处理只需要返回 promise 对象即可。

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript isArray 数组类型检测函数
Oct 08 Javascript
jQuery修改CSS伪元素属性的方法
Jul 30 Javascript
js的window.showModalDialog及window.open用法实例分析
Jan 29 Javascript
Bootstrap CDN和本地化环境搭建
Oct 26 Javascript
浅谈JS函数定义方式的区别
Oct 30 Javascript
详解微信小程序 template添加绑定事件
Jun 23 Javascript
Bootstrap 模态框(Modal)带参数传值实例
Aug 20 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
Apr 11 Javascript
JSON获取属性值方法代码实例
Jun 30 Javascript
vue递归获取父元素的元素实例
Aug 07 Javascript
如何HttpServletRequest文件对象并储存
Aug 14 Javascript
深入了解javascript 数组的sort方法
Jun 01 #Javascript
js 数组详细操作方法及解析合集
Jun 01 #Javascript
vue 中动态绑定class 和 style的方法代码详解
Jun 01 #Javascript
一个简单的node.js界面实现方法
Jun 01 #Javascript
浅析前端路由简介以及vue-router实现原理
Jun 01 #Javascript
Vue中的混入的使用(vue mixins)
Jun 01 #Javascript
JavaScript实现的简单加密解密操作示例
Jun 01 #Javascript
You might like
php购物网站支付paypal使用方法
2010/11/28 PHP
基于Swoole实现PHP与websocket聊天室
2016/08/03 PHP
从JavaScript 到 JQuery (1)学习小结
2009/02/12 Javascript
jQuery 加上最后自己的验证
2009/11/04 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/06 Javascript
js的写法基础分析
2011/01/17 Javascript
JavaScript中判断函数、变量是否存在
2015/06/10 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
jQuery 选择器(61种)整理总结
2016/09/26 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
2017/02/05 Javascript
JS中去掉array中重复元素的方法
2017/05/26 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
2017/07/10 Javascript
在vue项目中,将juery设置为全局变量的方法
2018/09/25 Javascript
浅析Vue中拆分视图层代码的5点建议
2019/08/15 Javascript
JavaScript实现秒杀时钟倒计时
2019/09/29 Javascript
[02:24]DOTA2亚洲邀请赛 NAVI战队出场宣传片
2015/02/07 DOTA
[04:49]期待西雅图之战 2016国际邀请赛中国区预选赛WINGS战队赛后采访
2016/06/29 DOTA
[55:25]2018DOTA2亚洲邀请赛3月29日 小组赛A组 VG VS OG
2018/03/30 DOTA
python追加元素到列表的方法
2015/07/28 Python
python3 pandas 读取MySQL数据和插入的实例
2018/04/20 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
Pycharm创建项目时如何自动添加头部信息
2019/11/14 Python
如何基于python实现归一化处理
2020/01/20 Python
Python爬虫自动化获取华图和粉笔网站的错题(推荐)
2021/01/08 Python
css3 background属性调整增强介绍
2010/12/18 HTML / CSS
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
意大利香水和彩妆护肤品购物网站:Ditano
2017/08/13 全球购物
到底Java是如何传递参数的?是by value或by reference?
2012/07/13 面试题
诚信考试倡议书
2014/04/15 职场文书
医疗专业毕业生求职信
2014/08/28 职场文书
感恩父母主题班会
2015/08/12 职场文书
2019大学生暑期实习心得总结
2019/08/21 职场文书
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python