I have a namespaced Vuex store module, and I am trying to access that module's state in a component (via mapState) to set a default value in my data. However, the "mapped state" is always undefined in my component.
My store is:
cartDetail.js
export const defaults = {
id: null,
items: [],
},
const state = { ...defaults, };
export default {
namespaced: true,
state,
}
and in my component, I have:
<script>
import { mapState, mapActions, } from 'vuex';
data() {
defaultSelected: this.cartDetail.items[0],
},
computed () {
...mapState('cartDetail', ['cartDetail,'],),
setDefaultSelected () {
return this.cartDetail.items[0];
},
},
created () {
this.cartFetch(userId);
}
</script>
Even when I console.log(this.cartDetail); in either my setDefaultSelected computed, or in created hook, it is undefined! Any help would be much appreciated!!
your data section looks incorrect. It should look like this:
data() {
return {
defaultSelected: this.items[0]
}
},
In mapState you should indicate state props (and their module name if they are not from the root state). I assume that carDetail.js is a store module.
computed () {
...mapState({
id: state => state.cartDetail.id,
items: state => state.cartDetail.items
}),
setDefaultSelected () {
return this.items[0];
},
},
Related
I'll try and lay this out as cleanly as possible:
I have a Vue component that I'm rendering called World.vue:
<template>
<v-container>
This is the whole world
<v-btn #click="test()" />
</v-container>
</template>
<script>
import { mapState, mapActions } from 'vuex';
export default {
computed: {
...mapState('drawers', ['isEquipmentOpen']),
},
methods: {
...mapActions('drawers', ['test']),
},
};
</script>
And I have a module in for the Vuex store called drawers (drawers.js):
export default {
namespaced: true,
state: {
isEquipmentOpen: false,
},
actions: {
test(state) {
console.log(state.isEquipmentOpen);
state.isEquipmentOpen = !state.isEquipmentOpen;
},
},
};
What I don't understand is why when test() is called, it can't access isEquipmentOpen (logs a value of undefined). How can I manipulate isEquipmentOpen?
You cannot mutate state values from actions.
You'll need to create a mutations property, create a setter method in it
and call it in order to change the value.
Pass a { commit } parameter to method in actions property.
You don't need to pass the state parameter in actions methods.
Make sure that the string value in the commit() is the same as the setter name.
export default {
namespaced: true,
state: {
isEquipmentOpen: false,
},
actions: {
test({ commit }) {
console.log(state.isEquipmentOpen);
commit("setIsEquipmentOpen");
},
mutations: {
setIsEquipmentOpen: state => state.isEquipmentOpen != state.isEquipmentOpen
},
};
Hope you understood the answer!
GOAL: I would like to watch a vuex state object (MATCH_DATA) for changes, specific to the value of a prop (topicId). So, I would like to set the watcher to watch MATCH_DATA[topicId]. And whenever MATCH_DATA[topicId] updates, I'd like to call a function (in this early case just logging it).
However, since MATCH_DATA is a getter how would I pass a parameter to it? The vuex getter does not seem to be designed to take in parameters. I have seen some examples by explicitly calling this.$store.state.etc.etc. but is there a way to do this while retaining the three dot notation I currently have?
Or, is there some better way of achieving this goal that does not involve a vuex getter?
Current Code:
Nuxt component:
<script>
import { mapGetters, mapActions } from 'vuex';
export default {
props: ['topicId'],
computed: {
...mapGetters('sessionStorage', ['MATCH_DATA']),
},
watch: {
MATCH_DATA (newMatchData, oldMatchData) {
console.log(newMatchData);
}
},
mounted() {
this.SUBSCRIBE_TO_TOPIC(this.topicId);
},
methods: {
...mapActions('sessionStorage', ['SUBSCRIBE_TO_TOPIC'])
}
}
vuex store:
/* State */
export const state = () => ({
MATCHES: {},
});
/* GETTERS */
export const getters = {
MATCH_DATA: (state) => {
return state.MATCHES;
},
};
Your getter can simply return a function like this:
export const getters = {
MATCH_DATA: (state) => {
return topicId => {
// return something
}}
},
};
Then you can create a computed property to access those getter:
export default {
computed: {
...mapGetters('sessionStorage', ['MATCH_DATA']),
yourComputedProperty () {
return this.MATCH_DATA(this.topicId)
}
}
}
Then you can watch the computed property to react on changes.
watch: {
yourComputedProperty (newData, oldData) {
console.log(newData);
}
}
I have a simple store:
UsersStore.js
state() {
return {
users: {
name: '',
userHasPermissions: false,
}
}
}
I am trying to use mapState to have the state accessible in my component. When I import the entire User object of the store like below, it works:
App.vue
computed: {
...mapState('users', {
myUser: 'user'
}
but I just want to import the userHasPermissions state but when I do the following, it does not seem to work:
App.vue
computed: {
...mapState('users', {
hasPerms: 'user.hasPermissions'
}
You can use vuex getters to get a specific property from any store object
state() {
return {
users: {
name: '',
userHasPermissions: false,
}
}
},
getters: {
userHasPermission(state) {
return state.users.userHasPermission || false;
}
}
Now you can use mapGetters to map store getters to your vue component
computed: {
...mapGetters({
hasPerms: "userHasPermission"
})
}
If you want to avoid using mapGetters and getters and use mapState, then you need to define a computed function inside your mapState to fetch the desired property
computed: {
...mapState({
hasPerms: (state) => state.users.userHasPermission
})
}
What is the best way to use this data from the Vuex store's Action in the needed component?
import axios from 'axios'
export default {
namespaced: true,
state: {
items: []
},
actions: {
fetchCategories ({state, commit}) {
return axios.get('/api/v1/categories')
.then(res => {
const categories = res.data
commit('setItems', {resource: 'categories', items: categories}, {root: true})
return state.items
})
}
}
}
Component
export default {
components: {
ThreadCreateModal,
ThreadList
},
data () {
return {
...
}
},
computed: {
...
},
created () {
...
},
methods: {
...
}
</script>
Where and how should I use that action for binding the data in this component?
Use mapState by import it from vuex and call it in computed:
computed: {
...mapState(['items']), // if you dont use namespace
...mapState("your_module_name", ['items'] ) // if you use namespace
},
then you can access it by this.items.
However, you can access it directly this.$store.state.items
I have a Vue component that uses Vuex with namespaced modules.
// Main Component
import store from './store';
import {mapState, mapGetters, mapActions} from 'vuex';
new Vue({
store,
computed: {
...mapState({
showModal: state => state.showModal,
}),
computed: {
...mapState('ModuleA', {
a: state => state.a,
}),
...mapState('ModuleB', {
b: state => state.b,
}),
...mapGetters('ModuleA', { getA: 'getA' } ),
...mapGetters('ModuleB', { getB: 'getB' } ),
},
methods: {
...mapActions('ModuleA', [ 'doSomeA']),
...mapActions('ModuleB', [ 'doSomeB']),
},
mounted() {
let payLoad = { ... },
this.doSomeA(payload); // I never see this getting dispatched
}
// Store
export default new Vuex.Store({
modules: { ModuleA, ModuleB }
...
}
// Module A
export default {
namespaced: true,
actions: {
doSomeA: ({dispatch, commit, getters, rootGetters}) => payload => { // do something with payload }
...
}
Since I have mapped the action from my namespaced module I am simply calling the action like normal method in my component. But somehow its not dispatching the action. Any idea what is going wrong here?