Question

尝试为简单的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>

Answer 1

要注意的一件事是阵列反应性的局限性。当通过直接设置索引来修改数组时，就像在updateName方法中一样，vue将无法获取更改。参见why isnt the dom updating?

下的＃2点

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

您可能还对诸如vue-localstorage之类的用于保存共享数据的软件包感兴趣。

Vue.js简单共享数据对象类

1 个答案: