设计模式(4): 给组件实现单独的store
概述
最近最近做项目的时候总会思考一些大的应用设计模式相关的问题,我把自己的思考记录下来,供以后开发时参考,相信对其他人也有用。
组件自身的store
我们在开发组件的时候,时常都有这种需求,就是希望给组件一个独立的store,这个store可能被用来储存数据,共享数据,还可以被用来对数据做一些处理,抽离核心代码等。
store的数据不共享
如果组件自身的store是每个实例独自拥有的并且不共享的话,我们可以直接用一个类来实现。
// store.js
export default class Store {
constructor(data, config) {
this.config = config;
this.init(data);
}
init(data) {
// 对数据做处理
}
// 其它方法
}
然后我们在组件中实例化这个store,然后挂载到data属性里面去:
<script>
import Store from './store';
export default {
data() {
return {
store: [],
};
},
methods: {
initStore() {
// 生成 options 和 config
this.store = new Store(options, config);
},
},
};
</script>
store的数据需要共享
如果store的数据需要共享,我们建议用动态挂载vuex的store的方法,示例如下:
// store.js
const state = {
data: [],
};
const getters = {};
const actions = {};
const mutations = {
setData(state, value) {
this.state.data = [...value];
},
};
export default {
state,
getters,
actions,
mutations,
};
然后我们在注册这个组件的时候动态挂载这个store:
import Store from './store';
export default {
install(Vue, options) {
Vue.store.registerModule('xxx', store);
},
};
最后我们就可以在组件中使用这个store的数据啦~~~
设计模式(4): 给组件实现单独的store的更多相关文章
- 为管理复杂组件状态困扰?试试 vue 简单状态管理 Store 模式【转】
https://juejin.im/post/5cd50849f265da03a54c3877 在 vue 中,通信有几种形式: 父子组件 emit/on vuex 中共享 state 跨组件 Eve ...
- nuxtjs如何在单独的js文件中引入store和router
nuxtjs里面集成vuex的创建方式改变了,并且官方不建议以导出Vuex实例的方式创建store,并且会在nuxt3里面删除.这样就会存在一个问题,我怎么像普通vue spa项目一样直接 impor ...
- React 世界的一等公民 - 组件
猪齿鱼Choerodon平台使用 React 作为前端应用框架,对前端的展示做了一定的封装和处理,并配套提供了前端组件库Choerodon UI.结合实际业务情况,不断对组件优化设计,提高代码质量. ...
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
- 【转】Web应用的组件化开发(一)
原文转自:http://blog.jobbole.com/56161/ 基本思路 1. 为什么要做组件化? 无论前端也好,后端也好,都是整个软件体系的一部分.软件产品也是产品,它的研发过程也必然是有其 ...
- Web应用的组件化(一)
基本思路 1. 为什么要做组件化? 无论前端也好,后端也好,都是整个软件体系的一部分.软件产品也是产品,它的研发过程也必然是有其目的.绝大多数软件产品是追逐利润的,在产品目标确定的情况下,成本有两个途 ...
- VUE.JS组件化
VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...
- 前端web应用组件化(一) 徐飞
https://github.com/xufei/blog/issues/6 Web应用的组件化(一) 基本思路 1. 为什么要做组件化? 无论前端也好,后端也好,都是整个软件体系的一部分.软件产品也 ...
- 聊聊vue组件开发的“边界把握”和“状态驱动”
vue有着完整的组件化开发机制,但是官网只给了开发的方式,对于开发规范以及组件化开发的最佳实践,还需要我们来摸索.本文就平时开发中的经验来谈谈“把握边界”和“状态驱动”这两个话题. 边界把握 边界把握 ...
随机推荐
- jQuery中outerWidth()方法
截图自:菜鸟教程https://www.runoob.com/jquery/html-outerwidth.html
- vue、iview动态菜单(可折叠)
vue项目与iview3实现可折叠动态菜单. 菜单实现一下效果: 动态获取项目路由生成动态三级菜单导航 可折叠展开 根据路由name默认打开子目录,选中当前项 自动过滤需要隐藏的路由(例:登陆) 在手 ...
- 2019-11-29-VisualStudio-解决方案筛选器-slnf-文件
title author date CreateTime categories VisualStudio 解决方案筛选器 slnf 文件 lindexi 2019-11-29 08:41:13 +08 ...
- 查个远程桌面是否开启 debug版360报毒 release 不报毒
360 真tm流氓一个
- css不同情况下的各种居中方法
div水平居中 1.行内元素 .parent{ text-align: center } 2.块级元素 .son{ margin: 0 auto ; } 3.flex布局 .parent{ displ ...
- Python之常用模块三(面向对象相关的三个模块)
hashlib.configparser.logging模块 一.常用模块二 hashlib模块 hashlib提供了常见的摘要算法,如md5和sha1等等. 那么什么是摘要算法呢?摘要算法又称为哈希 ...
- mysql 8.0.16 单主 mgr搭建
mysql 8.0.16 单主 mgr搭建 环境介绍: 192.168.142.142 db142192.168.142.143 db143192.168.142.145 db145 1.安装依赖包 ...
- 对js数组去重的研究
1.利用es5 let arr = [1, 2, 3, 4, 5, 6, 7, 1, 2, 3] const unique=arr=>{ return Array.from(new Set(ar ...
- 2019春Python程序设计作业2(0326--0401)
1-1 已知st="Hello World!",使用print(st[0:-1])语句可以输出字符串变量st中的所有内容. (2分) T F 1-2 Python程 ...
- Trie树简介
Trie树, 即字典树, 又称单词查找树或键树, 多叉树 基本性质 根节点不包含字符,除根节点外每一个节点都只包含一个字符 从根节点到某一节点,路径上经过的字符连接起来,为该节点对应的字符串 每个节点 ...