javascript - Vuejs 简单的共享数据对象类

Question

尝试为一个简单的 CRUD 应用程序创建一个简单的共享数据对象。鉴于网络应用程序相当简单(大约 25 个不同的表单/表格和每个表单中的 10 到 30 个字段的 CRUD)并且我们的团队只有 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>

Answer 1

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

When you modify an Array by directly setting an index (e.g. arr[0] = val) or modifying its length property. Similarly, Vue.js cannot pickup these changes. Always modify arrays by using an Array instance method, or replacing it entirely. Vue provides a convenience method arr.$set(index, value) which is syntax sugar for arr.splice(index, 1, value).

您可能也对 vue-localstorage 这样的包感兴趣保存共享数据。