Javascript Vuejs简单共享数据对象类

尝试为简单CRUD应用程序创建简单共享数据对象。考虑到web应用程序相当简单（大约25个不同的表单/表格和每个表单中的10到30个字段只需CRUD），而且我们的团队只有2人，我们觉得vuex对于这个项目来说可能有点过分了

参考本文，我创建了另一个实现，即使用Vue对象存储共享数据的简单数据存储。请参阅blow代码或

我们两人都是服务器端开发人员，我们更喜欢基于类的存储库模式，而不是存储/功能模式。因此，我们希望在vue中使用类似的模式来存储和检索api中的数据

是否有人有使用类似方法的经验？下面的代码现在似乎可以工作了！但是会有任何性能问题吗？还有什么意想不到的副作用

console.clear（）
var person=new Vue({
数据：{
项目：[]
},
计算：{
消息（）{
返回“Hello”+（this.items[0]？this.items[0]。名称：'name'）+“！”
}
},
方法：{
updateName（）{
此.items[0].name=“Jane Doe”
}
}
})
Vue.component（“子组件一”{
模板：“名称：{{person.items[0]？person.items[0]。名称：''}}}”，
数据：（）=>({
人:人
})
})
组件（“子组件二”{
模板：`Name:`，
数据：（）=>({
人:人
})
})
新Vue({
el:“附录2”，
安装的（）{
console.log（this.person.items）
},
数据：{
人:人
},
方法：{
updateGlobalName:函数（）{
this.person.updateName（）
警报（this.person.message）
},
loadData（）{
新承诺（（解析）=>setTimeout（解析，2*1000））。然后（（）=>this.person.items=[{
姓名：“约翰·多伊”
}])
}
},
创建（）{
console.log（this.person.items）
这是loadData（）
}
})

等待2秒钟以加载数据

来自Root的消息：
{{person.message}
更新全局名称

子组件1

子组件2

需要注意的一件事是阵列反应性的限制。当通过直接设置索引来修改数组时，由于使用了

updateName

方法，vue将无法获取更改。见下文第2点

通过直接设置索引（例如，

arr[0]=val

）或修改其长度属性来修改数组时。同样，Vue.js也无法接受这些更改。始终使用数组实例方法修改数组，或完全替换它。Vue提供了一种方便的方法

arr.$set（index，value）

，它是

arr.splice（index，1，value）

的语法糖

---

您可能还对保存共享数据的软件包感兴趣。

我不认为您想做什么很清楚。不要忘记，您也可以用javascript创建类，因此您可以像在java或C#中那样在技术上创建repo类。此外，vue组件具有您可以使用的属性（道具）。感谢您的建议。我不认为一个简单的类会是被动的。Vue noob！用一个简单的JS类更新了我的代码笔。反应性似乎在起作用。