I'm trying to map state of dynamic module, but it seems that I don't have access to this inside mapState or mapActions
<script>
import { mapState, mapActions } from 'vuex';
import MachineModule from '../store/modules/machine';
export default {
props: {
machineName: String,
},
created() {
this.$store.registerModule(this.machineName, MachineModule);
},
computed: {
...mapState(this.machineName, ['timesServiced']),
},
methods: {
...mapActions(this.machineName, ['serviceMachine']),
},
};
</script>
I got this error
Uncaught TypeError: Cannot read property 'machineName' of undefined.
Related
<script>
import {
mapGetters,
mapActions
} from "vuex";
export default {
name: 'Stores',
data() {
return {
selected: storesListsSelected
}
},
methods: {
...mapActions(["fetchStores"]),
onChange(event) {
console.log(event.value.value);
// localStorage.setItem('shop-id',event.value);
}
},
computed: mapGetters(["storesList","storesLists","storesListsSelected"]),
created() {
this.fetchStores()
}
}
</script>
here mapGetters to call data return values ( return { selected: storesListsSelected})
i am trying.but i got error Uncaught (in promise) ReferenceError: storesListsSelected is not defined.
how to solve this?
you have forgotten use 'this'
data() {
return {
selected: this.storesListsSelected
}},
you can change name of property like this and dont need define data property
...mapGetters("storesList","storesLists", { selected: "storesListsSelected" })
I get this error "Property 'load' does not exist on type '{ name: string; components: { IonHeader:"
When I'm trying to call the function load from mounted().
Message shows in console but I get this error.
<script lang="ts">
import {
IonHeader,
IonToolbar,
IonTitle,
IonContent,
//IonIcon,
//IonButtons,
IonButton,
alertController,
} from "#ionic/vue";
import { logOut, add } from "ionicons/icons";
import { mapActions, mapGetters } from "vuex";
import { useRouter } from "vue-router";
import "../style/Home.scss";
export default {
name: "ListDatos",
components: {
IonHeader,
IonToolbar,
IonTitle,
IonContent,
IonButton,
},
data() {
return {
msg: "",
datos: [],
};
},
setup() {
const router = useRouter();
return {
add,
};
},
mounted() {
console.log("Test mounted");
this.load();
},
methods: {
load(){
console.log("function load()");
},
},
};
</script>
That is because TypeScript is trying to guess the type and since you are doing: export default {...all your code...} for TS that is just an object, you need to indicate that it is not just an object and in fact it is a Vue component, here is the code extracted from the docs (check the docs here)
import Vue from 'vue'
const Component = Vue.extend({
// type inference enabled
})
As you can see on that code, the component definition is wrapped in Vue.extend() so you could have your code:
export default Vue.extend({
//...your component...
})
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);
},
}
};
When I call a mapped Vuex action in my mounted hook, the action works, but I get "TypeError: xxx is not a function" error in the console.
Here's my whole script section for this component:
<script>
import SideNav from '#/components/SideNav.vue'
import ActionBar from '#/components/ActionBar.vue'
import Summaries from '#/components/Summaries.vue'
import { mapState, mapActions } from 'vuex'
export default {
components: { SideNav, ActionBar, Summaries },
computed: {
...mapState(['dataLoading']),
...mapActions(['init'])
},
mounted() {
this.init();
}
}
</script>
You should map Actions as methods instead of computed, see dispatch actions in components:
computed: {
...mapState(['dataLoading'])
},
methods: {
...mapActions(['init'])
},
mounted() {
this.init();
}
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'
})