Vuejs simple shared data object class

Question

Trying to create a simple shared data object for a simple CRUD app. Given the web app is fairly simple (just CRUD for approx 25 different forms/tables and 10 to 30 fields in each form) and our team is only 2 persons, we feel vuex maybe an overkill for this project.

Referring to SO QA here I have created another implementation a simple data store that uses a Vue object to store shared data. See blow code or codepen.

Both of us are server side developers and we are more comfortable with a class based repository pattern than a store/functional pattern. So we are hoping to use a similar pattern in vue for storing and retrieving data from api.

Does anyone have experience using a similar approach? Code below seems to work now! But would there be any performance issues? or any unexpected side effects?

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>

I don't think what your trying to do is very clear. Don't forget that you can also create classes in javascript, so you can technically create your repo classes as you would in java or C#. Also, the vue components have properties (props) that you can use. — Juan Carlos Eduardo Romaina Ac, Sep 21 '18 at 22:52
Thanks for the suggestion. I did not think that a plain class will be reactive. Vue noob! Updated my codepen with a plain JS class. https://codepen.io/anon/pen/oPVVmB?editors=1010. and reactivity seems to be working. — Hu Xain, Sep 22 '18 at 09:51

score 1 · Answer 1 · answered Sep 21 '18 at 22:49

One thing to be aware of is the limitations of array reactivity. When modifying an array by directly setting an index, as you are in the updateName method, vue will not be able to pickup the changes. See point #2 under why isnt the dom updating?

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).

You may be interested also in a package such as vue-localstorage to hold shared data.

Vuejs simple shared data object class

1 Answers1