记一次前端项目重构要点总结

[ihoey]

非常想学习下 三、解耦可视化库和Vue/Vuex

想学习下完整的使用方法， 感觉这样写很不错唉

[Terry-Su]

@ihoey 的确，这是摸索许久发现的一个简易方法。可以新建目录结构：

models
|__  model.js
|__  LibraryApp.js（这里就是类vuex的class写法）

model.js

import LibraryApp from './LibraryApp'
export const libraryApp = new LibraryApp()

然后在vue或vuex中直接引用

import { libraryApp } from '../models/model'
export default {
  ...
  mounted() { libraryApp.render()  }
  ...
}
...

[ihoey]

还是比较好奇 class 写法是怎么对应上如 State Getter 的呢 如果直接在 vue 里面用的话 就相当于没有用 vuex 了

[Terry-Su]

其实它并没有对应vue或vuex的state、getter等，只是一个普通非响应式model对象，参考了vuex的写法，在任何地方都可以引用。如果你要在vuex中使用，直接引入getters或actions使用就行。

[ihoey]

明白了， 也就是这样的写法其实没有办法直接用在 vuex 对吧 还是要将 getters actions 等单独写，刚开始没有看懂 类vuex 的意思😅😅

[Terry-Su]

我之前尝试过一次封装Vuex为这样的写法，但时间有限，发现有很多问题需要解决，不过redux完全可以。你感兴趣也可以试试写一个vuex的。 另外，也可以参考下现成的mobx, 跟我们这个需求很像。

[ihoey]

好的 非常感谢 之前没有用过 mobx 我去看下

[ink-paint]

使用Map代替判断更占用内存