Computed properties without setter with VueX

Joever Monceda
Jul 16 · 2 min read

Reactivity in Depth

One of Vue’s most distinct feature is the unobtrusive reactivity system. Models are just plain JavaScript objects but when you modify them, the view updates. It makes state management simple and intuitive, but it’s also important to understand how it works to avoid some common gotchas

-vuejs.org

When using computed get/set properties we always expect to provide set function to accept new added object base on user.

But did you KNOW?

Computed get/set properties works even if there’s no set function?

NO its not working!! It will give an ERROR: Computed property “users” was assigned to but it has no setter.

How it will works:

(Note: you can do it in any javascript playground, but this sample run using jsfiddle)

HTML:

1. Import scripts.

<script src=”https://unpkg.com/vue"></script>

<script src=”https://unpkg.com/vuex"></script>

<script src=”https://unpkg.com/axios/dist/axios.min.js"></script>

2. Create div and assign id to app.

JS:

  1. Create new Vue instance and assign it to app.

2. Create store from Vuex instance.

  • The undefined store in instruction 1 is now resolved.
  • Define users as array in state.
  • Assign state users to getters.
  • In actions create function getUser to request list of users.
  • Actions commit mutations.

3. Add component using Vue instance (make sure name from html and component are the same).

Now your HTML and JS is complete, you can try adding new name by clicking the plus (+) button.

It will display simple input and just enter name.

You will see that the new added name in the user list without getting any warnings/errors.

Example: https://jsfiddle.net/Ethan0007/5bLcu9ja/

How Changes Are Tracked: https://vuejs.org/v2/guide/reactivity.html

Twitter: https://twitter.com/_EthanHunt07

LinkedIn: https://www.linkedin.com/feed/update/urn:li:activity:6556857396478734336

Facebook: https://www.facebook.com/groups/vuejsdevelopers/permalink/690896881322331/

ASP.NET Core & VueJS Starter kit https://github.com/Ethan0007/aspnetcore-vue-starterkit

Looking for a asynchronous modular micro-framework Reser https://github.com/rhaldkhein/reser

by RhaldKhein https://github.com/rhaldkhein/

Joever Monceda

Written by

Web and Mobile Developer @ BookingWiz Ltd. Thailand

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade