I get an error with my App.vue component , getter: logged
<li id="shoppinglists" v-if="!logged">...
ERROR LOG: '[Vue warn]: Property or method "logged" is not defined on the instance but referenced during render.
Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
I don't understand why it's stated as non-defined, as I don't get error with another defined getter: currentUserId
<li v-else id="shoppinglists"><router-link :to="{ name: 'ShoppingLists', params: { id: currentUserId } }" >Shopping Lists</router-link></li>
Bothe are defined as computed props :
<script>
import store from '#/vuex/store'
import { mapGetters } from 'vuex'
export default {
name: 'app',
computed: {
...mapGetters([
{ currentUserId: 'getCurrentUserId' },
{ logged: 'getCurrentUserStatus' }
])
},
store
}
</script>
and my vex/getters.js is :
vuex/getters.js
export default {
getCurrentUserStatus: state => state.logged,
getCurrentUserId: state => state.currentUserId,
...
}
and my store is
vuex/store.js
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
...
Vue.use(Vuex)
const state = {
logged: false,
currentUserId: '',
...
}
export default new Vuex.Store({
state,
getters,
...
})
Just pass an object to ...mapGetters if you want to use the getters with different name
So the syntax is:
...mapGetters({
currentUserId: 'getCurrentUserId',
logged: 'getCurrentUserStatus'
})
Related
Hi I have an error in Vuex
11:17 error 'state' is defined but never used no-unused-vars
I can't find anything about this
and here is the code
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
count: 0,
},
getters: {
increment: (state) => this.state.count++,
},
});
<template>
<div>
{{ this.$store.state.count }}
<button #click="increment">increment</button>
</div>
</template>
<script>
export default {
data() {
return {
};
},
methods: {
increment() {
this.$store.getters.increment;
},
},
};
</script>
Instead of doing this.state.count++, do state.count += 1 as state is being passed as an argument to getter. Although I am not sure why state is being mutated by a getter. (use mutations).
I'm trying Quasar for the first time and trying to use the Vuex with modules but I can't access the $store property nor with ...mapState. I get the following error 'Cannot read property 'logbook' of undefined' even though I can see that the promise logbook exists on Vue Devtools. Print from Devtools
Here is my store\index.js
import Vue from 'vue';
import Vuex from 'vuex';
import logbook from './logbook';
Vue.use(Vuex);
export default function (/* { ssrContext } */) {
const Store = new Vuex.Store({
modules: {
logbook,
},
strict: process.env.DEV,
});
return Store;
}
Here is the component
<template>
<div>
<div>
<h3>RFID</h3>
<q-btn #click="logData"
label="Save"
class="q-mt-md"
color="teal"
></q-btn>
<q-table
title="Logbook"
:data="data"
:columns="columns"
row-key="uid"
/>
</div>
</div>
</template>
<script>
import { mapState, mapGetters, mapActions } from 'vuex';
export default {
name: 'RFID',
mounted() {
this.getLogbookData();
},
methods: {
...mapActions('logbook', ['getLogbookData']),
...mapGetters('logbook', ['loadedLogbook']),
...mapState('logbook', ['logbookData']),
logData: () => {
console.log(this.loadedLogbook);
},
},
data() {
return {
};
},
};
</script>
<style scoped>
</style>
Here is the state.js
export default {
logbookData: [],
};
Error that I get on the console
Update: Solved the problem by refactoring the way I declared the function. I changed from:
logData: () => { console.log(this.loadedLogbook); }
to
logData () { console.log(this.loadedLogbook); }
Check the .quasar/app.js file. Is there a line similar to import createStore from 'app/src/store/index', and the store is later exported with the app in that same file?
I think you confused all the mapx functions.
...mapState and ...mapGetters provide computed properties and should be handled like this
export default {
name: 'RFID',
data() {
return {
};
},
mounted() {
this.getLogbookData();
},
computed: {
...mapGetters('logbook', ['loadedLogbook']),
...mapState('logbook', ['logbookData']),
}
methods: {
...mapActions('logbook', ['getLogbookData']),
logData: () => {
console.log(this.loadedLogbook);
},
}
};
I'm new to VueJS and try to use the store with NuxtJS.
So, i want to get this (https://nuxtjs.org/guide/vuex-store/) to work.
My store ./store/index.js
import { mapActions, mapGetters } from 'vuex'
export const state = () => ({
temperature: '1234'
})
export const mutations = {setName
setTemperature(state, payload) {
state.temperature = payload
}
}
export const actions = {
getWeatherData({ commit }) {
console.log("set weather to 123")
commit('setTemperature', '123')
}
}
export const getters = {
storeTemperature(state) {
return state.temperature
}
}
export const mixin = {
computed: {
...mapGetters([{
myTemperature: 'weather/storeTemperature'
}])
},
methods: {
...mapActions({
loadWeatherData: 'weather/getWeatherData'
})
}
}
export default mixin
Now i have a simple component to display the temperature:
<template>
<div class="label">
{{ testB }}
</div>
</template>
<style lang="scss" src="./Label.scss"></style>
<script>
import { mixin as WeatherMixin } from '../../store'
export default {
name: 'Label',
//mixins: [WeatherMixin],
props: {
content: {
Type: String,
default: ''
}
},
computed: {
testB () {
return this.$store.state.store.temperature
}
}
}
</script>
I tried to use mapGetters and use it like:
testB () {
return this.myTemperature
}
but this didn't work.
So i tried to use mapState via:
// store
computed: {
...mapState({ temperature: 'temperature' })
}
and use it in the component like
<div class="label">
{{ temperature }}
</div>
But i always didn't get the default value of 1234.
The Vue Console didn't find the store:
But forward to the NuxtJS documentation:
Nuxt.js will look for the store directory, if it exists, it will:
Import Vuex,
Add the store option to the root Vue instance.
What i need to get the store working as expected and how i can access the store state properties? Did i miss something?
To properly manage Vuex in NuxtJS, use namespaced Vuex modules, to keep your state logic properly organized.
For a globally accessible state, you can add these to the ./store/index.js file, while for namespaced modules create a folder with a name of your namespaced module (Preferably no spaces.), then in this folder create files with names actions.js for actions, state.js for states, getters.js for getters and mutations.js for your mutations and export default from each.
You can then access the namespaced state with this.$store.state.<NAMESPACED MODULE NAME>.<STATE VARIABLE>
If I have a store:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
foo: bar
},
mutations: {
updateComponent (state) {
// computation and logic
// update state
this.$refs.myComponent.updateComponent(state.foo)
}
}
}
And I have a component with ref 'myComponent':
<template>
...
</template>
<script>
export default {
...
methods: {
updateComponent(payload) {
// do stuff
}
}
}
</script>
I would like to call the 'updateComponent()' method from the store. I can use this.$refs.myComponent from other views and components, but it doesn't work from the Store. I get error TypeError: Cannot read property 'myComponent' of undefined.
Clearly this is not the correct scope for the this.$refs.myComponent when using from the Store.
Can I call updateComponent() from my store mutation, and how?
You could use vuex's subscribe method. Subscribe your component in it's mounted phase:
mounted() {
this.$store.subscribe((mutation, state) => {
switch(mutation.type) {
case 'updateComponent':
// Update your component with new state data
break;
}
})
}
Reference: https://vuex.vuejs.org/api/#subscribe
This is my store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
isLoggedIn: !!localStorage.getItem('token'),
isLog : !!localStorage.getItem('situation')
},
mutations: {
loginUser (state) {
state.isLoggedIn = true
state.isLog = true
},
logoutUser (state) {
state.isLoggedIn = false
state.isLog = false
},
}
})
but when I call {{state.isLoggedIn}} in the display.vue, I am not getting the values.
In display.vue, I use
<script>
import axios from "axios";
import store from '../store';
export default {
name: "BookList",
data() {
return {
students: [],
errors: [],
state: this.state.isLoggedIn,
};
},
})
</script>
<template>
{{this.state}}
</template>
But I am getting errors when i done this way. Please can anyone please help what is the problem.
You don't need to import your store into your component. Instead, you should access it using this.$store.
For accessing the store state, the better (and recommended) way is to map the state within your component.
In your example it should be something like:
import { mapState } from 'vuex'
export default {
...
computed: {
...mapState({
isLoggedIn: 'isLoggedIn'
})
}
}
In your template, this is not needed. Just call the property by its name:
{{ isLoggedIn }}