Vuejs 简单的共享数据对象类答案

【问题标题】：Vuejs simple shared data object classVuejs 简单的共享数据对象类
【发布时间】：2019-02-26 07:11:14
【问题描述】：

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

参考SO QA here 我创建了另一个实现，一个简单的数据存储，它使用 Vue 对象来存储共享数据。请参阅打击代码或codepen。

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

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

console.clear()

var person = new Vue({
    data: {
        items: []
    },
    computed: {
        message() {
            return "Hello " + (this.items[0] ? this.items[0].name : 'name') + "!"
        }
    },
    methods: {
        updateName() {
            this.items[0].name = "Jane Doe"

        }
    }

})


Vue.component("child-component-one", {
    template: "<div>Name: {{ person.items[0] ? person.items[0].name : ''  }}</div>",
    data: () => ({
        person: person
    })
})

Vue.component("child-component-two", {
    template: `<div> Name: <input v-if="person.items[0]" v-model=person.items[0].name /> </div>`,
    data: () => ({
        person: person
    })
})

new Vue({
    el: "#app2",
    mounted() {
        console.log(this.person.items)
    },
    data: {
        person: person
    },
    methods: {
        updateGlobalName: function () {
            this.person.updateName()
            alert(this.person.message)
        },
        loadData() {
            new Promise((resolve) => setTimeout(resolve, 2 * 1000)).then(() => this.person.items = [{
                name: "John Doe"
            }])
        }
    },
    created() {

        console.log(this.person.items)
        this.loadData()
    }
})

 <div id="app2">
   Wait 2 seconds for data to load <br />
  Message From Root: &nbsp;
  {{ person.message }}
   <button @click="updateGlobalName">Update Global Name</button>
   <hr>
   Child Component 1
  <child-component-one></child-component-one>
   <hr>
   Child Component 2
  <child-component-two></child-component-two>
  
</div>

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>

【问题讨论】：

我认为您的尝试不是很清楚。不要忘记您也可以在 javascript 中创建类，因此您可以像在 java 或 C# 中一样在技术上创建您的 repo 类。此外，vue 组件具有您可以使用的属性（props）。
感谢您的建议。我不认为一个普通的类会是被动的。 Vue 菜鸟！用一个普通的 JS 类更新了我的 codepen。 codepen.io/anon/pen/oPVVmB?editors=1010。并且反应似乎起作用了。

标签： javascript vue.js

【解决方案1】：

需要注意的一点是数组反应性的局限性。通过直接设置索引来修改数组时，就像您在 updateName 方法中一样，vue 将无法获取更改。请参阅why isnt the dom updating? 下的第 2 点

当您通过直接设置索引（例如arr[0] = val）或修改其长度属性来修改数组时。同样，Vue.js 也无法获取这些更改。始终使用 Array 实例方法或完全替换它来修改数组。 Vue 提供了一个方便的方法arr.$set(index, value)，它是arr.splice(index, 1, value) 的语法糖。

您可能还对vue-localstorage 等用于保存共享数据的包感兴趣。

【讨论】：