概述

最近最近做项目的时候总会思考一些大的应用设计模式相关的问题,我把自己的思考记录下来,供以后开发时参考,相信对其他人也有用。

组件自身的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的更多相关文章

  1. 为管理复杂组件状态困扰?试试 vue 简单状态管理 Store 模式【转】

    https://juejin.im/post/5cd50849f265da03a54c3877 在 vue 中,通信有几种形式: 父子组件 emit/on vuex 中共享 state 跨组件 Eve ...

  2. nuxtjs如何在单独的js文件中引入store和router

    nuxtjs里面集成vuex的创建方式改变了,并且官方不建议以导出Vuex实例的方式创建store,并且会在nuxt3里面删除.这样就会存在一个问题,我怎么像普通vue spa项目一样直接 impor ...

  3. React 世界的一等公民 - 组件

    猪齿鱼Choerodon平台使用 React 作为前端应用框架,对前端的展示做了一定的封装和处理,并配套提供了前端组件库Choerodon UI.结合实际业务情况,不断对组件优化设计,提高代码质量. ...

  4. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  5. 【转】Web应用的组件化开发(一)

    原文转自:http://blog.jobbole.com/56161/ 基本思路 1. 为什么要做组件化? 无论前端也好,后端也好,都是整个软件体系的一部分.软件产品也是产品,它的研发过程也必然是有其 ...

  6. Web应用的组件化(一)

    基本思路 1. 为什么要做组件化? 无论前端也好,后端也好,都是整个软件体系的一部分.软件产品也是产品,它的研发过程也必然是有其目的.绝大多数软件产品是追逐利润的,在产品目标确定的情况下,成本有两个途 ...

  7. VUE.JS组件化

    VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...

  8. 前端web应用组件化(一) 徐飞

    https://github.com/xufei/blog/issues/6 Web应用的组件化(一) 基本思路 1. 为什么要做组件化? 无论前端也好,后端也好,都是整个软件体系的一部分.软件产品也 ...

  9. 聊聊vue组件开发的“边界把握”和“状态驱动”

    vue有着完整的组件化开发机制,但是官网只给了开发的方式,对于开发规范以及组件化开发的最佳实践,还需要我们来摸索.本文就平时开发中的经验来谈谈“把握边界”和“状态驱动”这两个话题. 边界把握 边界把握 ...

随机推荐

  1. jQuery中outerWidth()方法

    截图自:菜鸟教程https://www.runoob.com/jquery/html-outerwidth.html

  2. vue、iview动态菜单(可折叠)

    vue项目与iview3实现可折叠动态菜单. 菜单实现一下效果: 动态获取项目路由生成动态三级菜单导航 可折叠展开 根据路由name默认打开子目录,选中当前项 自动过滤需要隐藏的路由(例:登陆) 在手 ...

  3. 2019-11-29-VisualStudio-解决方案筛选器-slnf-文件

    title author date CreateTime categories VisualStudio 解决方案筛选器 slnf 文件 lindexi 2019-11-29 08:41:13 +08 ...

  4. 查个远程桌面是否开启 debug版360报毒 release 不报毒

    360 真tm流氓一个

  5. css不同情况下的各种居中方法

    div水平居中 1.行内元素 .parent{ text-align: center } 2.块级元素 .son{ margin: 0 auto ; } 3.flex布局 .parent{ displ ...

  6. Python之常用模块三(面向对象相关的三个模块)

    hashlib.configparser.logging模块 一.常用模块二 hashlib模块 hashlib提供了常见的摘要算法,如md5和sha1等等. 那么什么是摘要算法呢?摘要算法又称为哈希 ...

  7. mysql 8.0.16 单主 mgr搭建

    mysql 8.0.16 单主 mgr搭建 环境介绍: 192.168.142.142 db142192.168.142.143 db143192.168.142.145 db145 1.安装依赖包 ...

  8. 对js数组去重的研究

    1.利用es5 let arr = [1, 2, 3, 4, 5, 6, 7, 1, 2, 3] const unique=arr=>{ return Array.from(new Set(ar ...

  9. 2019春Python程序设计作业2(0326--0401)

    1-1 已知st="Hello World!",使用print(st[0:-1])语句可以输出字符串变量st中的所有内容. (2分) T         F 1-2 Python程 ...

  10. Trie树简介

    Trie树, 即字典树, 又称单词查找树或键树, 多叉树 基本性质 根节点不包含字符,除根节点外每一个节点都只包含一个字符 从根节点到某一节点,路径上经过的字符连接起来,为该节点对应的字符串 每个节点 ...