We Keep Coding

Readonly issue when using vuex-persistedstate

I'm getting an error that has me stumped. I want to keep the open/close state of the q-drawer component in the Vuex store and keep it open/closed after the page is refreshed. The components work as expected until I add the vue-persistedstate plugin to the store. The console says [Vue warn]: Write operation failed: computed property "drawerOpen" is readonly. I never set anything to readonly on purpose so I cannot find which line of code caused the issue. Other data of the store do not have an issue.
I will post the excerpts of code that are potentially relevant. There are no references to drawerOpen elsewhere in the code.
MainLayout.vue
<q-drawer
v-model="drawerOpen"
show-if-above
bordered
class="bg-grey-1"
>
<q-list>
<q-item-label
header
class="text-grey-8"
>
Essential Links
</q-item-label>
<EssentialLink
v-for="link in essentialLinks"
:key="link.title"
v-bind="link"
/>
</q-list>
</q-drawer>
<q-page-container>
<router-view />
</q-page-container>
</q-layout>
</template>
<script>
import EssentialLink from 'components/EssentialLink.vue'
import { computed, defineComponent, ref } from 'vue'
import { useStore } from 'vuex'
const linksList = [
{
title: 'Dashboard',
caption: 'See your progress',
icon: 'dashboard',
link: ''
},
{
title: 'Courses',
caption: 'Learn something new',
icon: 'school',
link: 'https://github.com/quasarframework'
},
{
title: 'Forum',
caption: 'Find like-minded people',
icon: 'chat',
link: 'https://chat.quasar.dev'
},
{
title: 'Support',
caption: 'We\'re here to help',
icon: 'record_voice_over',
link: 'https://chat.quasar.dev'
},
];
import { mapGetters, mapActions } from 'vuex'
export default {
name: 'MainLayout',
components: {
EssentialLink
},
computed: {
...mapGetters({
username: 'profile/getUsername',
drawerOpen: 'profile/getDrawerOpen',
}),
},
methods: {
...mapActions({
close_open_drawer: 'profile/toggleDrawer'
}),
},
setup () {
return {
essentialLinks: linksList
}
}
}
</script>
state.js
export default function () {
return {
drawerOpen: true,
email: '',
username: '',
userToken: '',
test: ''
}
}
actions.js
...
export const toggleDrawer = (state, payload) => {
state.commit("toggleDrawer", payload)
}
mutations.js
...
export const toggleDrawer = (state, payload) => {
state.drawerOpen = !state.drawerOpen
}
index.js
import { store } from 'quasar/wrappers'
import { createStore } from 'vuex'
import createPersistedState from "vuex-persistedstate";
import profile from './profile'
export default store(function (/* { ssrContext } */) {
const Store = createStore({
modules: {
profile
},
plugins: [createPersistedState()],
strict: process.env.DEBUGGING
})
return Store
})

How to get Vue.set working right in Vuex?

i get a vuejs error Property or method "selectedVehicule" is not defined on the instance but referenced during render. Make sure that this property is reactive...
i think this coming from Vue.set but what i did wrong
Here is my main.js file:
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
selectedVehicle: {},
},
mutations: {
setSelectedVehicle (state, selectedVehicle) {
Vue.set(state.selectedVehicle, 'items', 'dummy1')
Vue.set(state.selectedVehicle, 'id', 'dummy2')
Vue.set(state.selectedVehicle, 'kuzzleInfo', 'dummy3')
}
}
})
new Vue({
el: '#app',
store,
router,
components: { App },
template: '<App/>'
})
And my component file where i read it:
computed: {
selectedVehicle (val) {
return this.$store.state.selectedVehicle
}
},
...
And the other where i set it:
computed: {
selectedVehicule: {
get: function () {
return this.$store.state.selectedVehicle
},
set: function (newVal) {
this.$store.commit('setSelectedVehicle', newVal)
}
}
}

fill your selectedVehicle with all the 3 properties in state object
state: {
selectedVehicle: {
items: '',
id: '',
kuzzleInfo: ''
},
}
you could try it

Vue.js component library that depends on Vuetify. $attrs is readonly - error

Intro: I've generated two projects with vue-cli ~4.2.0:
parent-app - main project
dummylib - library which is imported by parent-app. Has a bunch of .vue components inside.
I want to use vuetify here
Example of library component, where i utilize <v-btn>:
<script>
import { mapActions, mapGetters } from 'vuex'
import { VBtn } from 'vuetify/lib'
export default {
name: 'DummyButton',
components: {
VBtn
},
computed: {
...mapGetters([
'counter'
]),
text () {
return `I have been clicked ${this.counter}`
}
},
methods: {
...mapActions([
'increment'
])
}
}
</script>
<template>
<v-btn color='primary' #click="increment">{{ text }}</v-btn>
</template>
Problem: <v-btn> renders, but on each click i get errors in console:
[Vue warn]: $attrs is readonly.
[Vue warn]: $listeners is readonly.
Library's vue.config.js:
module.exports = {
configureWebpack: {
...(process.env.NODE_ENV === 'production'
? {
externals: {
'vuetify/lib': 'vuetify/lib'
}
}
: {}),
resolve: {
alias: {
vue$: 'vue/dist/vue.common.js'
}
}
}
}

Access data variable inside a component

I made a repository of Vue using
vue init webpack my-app
Now, my main.js is something like this --
// The Vue build version to load with the import command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
Vue.component('todo-item', {
template: '<li>{{ todo }}</li>',
props: ['todo']
})
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App :groceryList="groceryList"/>',
data:{
message: 'abcdefghi',
groceryList: [
{ id: 0, text: 'Vegetables' },
{ id: 1, text: 'Cheese' },
{ id: 2, text: 'Whatever else humans are supposed to eat' }
]
}
})
My App.vue file has the template with id app as mentioned in the main.js
<template>
<div id="app">
At Parent: {{ groceryList[1].text }}
<br/>
<div>{{ message }}</div>
<router-view/>
<Table/>
<Users/>
</div>
</template>
<script>
import Users from './components/Users'
import Table from './components/Table'
export default {
name: 'App',
components: {
Users,
Table,
},
}
</script>
Here,I keep getting errors that cannot read property groceryList and message of undefined. I have read the documentation of vue and according to it I am not making any mistakes. So, what is the problem here?

In main.js, you should declare data as a function and pass :message to App component
new Vue({
el: '#app',
router,
components: { App },
template: '<App :groceryList="groceryList" :message="message"/>',
data () {
return {
message: 'abcdefghi',
groceryList: [
{ id: 0, text: 'Vegetables' },
{ id: 1, text: 'Cheese' },
{ id: 2, text: 'Whatever else humans are supposed to eat' }
]
}
}
})
and in App.vue, you need to declare groceryList and message as props
<script>
import Users from './components/Users'
import Table from './components/Table'
export default {
name: 'App',
props: ['message', 'groceryList']
components: {
Users,
Table,
},
}
</script>

Uncaught TypeError: this.$store.commit is not a function

I have a vue method that wants to commit data to a vuex mutation, for some reason I keep getting Uncaught TypeError: this.$store.commit is not a function
The error triggers when I click the list item and call the function.
sample.vue
<li class="tabs-title" v-for="item in filteredItems" v-on:click="upComponents" :key="item.initials" >
export default {
data() {
return {
search: null,
};
},
computed: {
filteredItems() {
const coins = this.$store.state.coin.coin;
if (!this.search) return coins;
const searchValue = this.search.toLowerCase();
const filter = coin => coin.initials.toLowerCase().includes(searchValue) ||
coin.name.toLowerCase().includes(searchValue);
return coins.filter(filter);
},
},
methods: {
upComponents(item) {
this.$store.commit('updatedComp', item);
},
},
mounted() {
this.tabs = new Foundation.Tabs($('#exchange-tabs'), {
matchHeight: false,
});
},
destroyed() {
this.tabs.destroy();
},
};
This is the store.js file where I declare the mutation.
import Vue from 'vue';
import Vuex from 'vuex';
import coin from '../data/system.json';
Vue.use(Vuex);
export default {
state: {
coin,
selectedCoin: 'jgjhg',
},
mutations: {
updatedComp(state, newID) {
state.selectedCoin.push(newID);
},
},
getters: {
coin: state => state.coin,
},
};
main.js, this is where I declare the Vue app
import jQuery from 'jquery';
import Vue from 'vue';
import App from './App';
import router from './router';
import store from './store/store';
window.jQuery = jQuery;
window.$ = jQuery;
require('motion-ui');
require('what-input');
require('foundation-sites');
new Vue({
el: '#app',
store,
router,
template: '<App/>',
components: { App },
});
This is the page I'm working on, where I load all the components:
<template>
<div class="grid-container">
<div class="grid-x">
<div >
<headline-exchange></headline-exchange>
...
</div>
</div>
</div>
</template>
<script>
import Headline from './molecules/Headline';
export default {
components: {
'headline-exchange': Headline,
},
};
</script>

You are not creating a Vuex store. All you have is an object defining the store properties.
Change your store.js to be
export default new Vuex.Store({
state: { ... },
mutations: { ... },
// etc
})
See https://vuex.vuejs.org/guide/#the-simplest-store