If you are Getting Vuex computed property was assigned to but it has no setter error.
This article will help you fix the issue. The error happens because of the v-model. It’s trying to change the value of isLoading but mapState will only create getters. Consider the example below:. For your component file:. Your store file should be like below:.
You can make things work by binding the value to the isLoading and then handle the update by committing the mutations on the @input.
Consider the example below:.
In this tutorial, we’ll look at how we can access the State from our Vuex store from within our components, both directly and with the help of Getters. If we take a look at our main.js file, we see we’re importing our Vuex store file, and providing it to our root Vue instance.
This was set up for us because we selected Vuex when we created our project with the Vue CLI.
stakx - no longer contributing
80.1k
1818 gold badges159159 silver badgesThis makes the store globally accessible throughout our app by injecting it into every component.ChrisChris
This way, any component can access the store and the properties on it (such as State, Actions, Mutations and Getters) by using $store.
2
If we need to access different parts of our State from the same component, it can get verbose and repetitive to have multiple computed properties each returning this.$store.state.something.
To simplify things, we can use the mapState helper, which generates computed properties for us. Let’s first add some more State to our Vuex Store so we can see this in action.
We’ll add an array of event categories:.
Vamsi KrishnaVamsi Krishna
28.2k
Now, in EventCreate.vue, we can import mapState. Then use it to map our State to a computed property that can retrieve our user’s name, and our categories.If we’re wanting to access the top-level State (not using dot notation), there’s an even simpler way to write this, like so:.
Notice all we need to do is use the State’s string value 'categories'.
This is equivalent to . We could simplify the mapState syntax even more by passing an array of strings of the State values we want to map to computed properties, like so:.
Of course, now in our template we’d just need to use dot notation to access our user’s name.
1
As you probably noticed, mapState returns an object of computed properties.
But it’s currently preventing us from adding additional, local computed properties that aren’t mapped to our Store’s State.
To do that, we can use the object spread operator, which allows us to mix in additional computed properties here.
While we can access the Store’s State directly, sometimes we want to access derived state. In other words, we might want to process the state in some way when we access it.
vir usvir us
8,718For example, instead of accessing our State’s categories, we might want to know how many categories there are.
TL;DR