Vuex 4, State is empty in component - javascript

I am trying to access subjects store state using this.$store.state.subjects inside my home component however it comes up as an empty array. Using console.log the only place I am able to see the state.subjects populated is if its in the mutation function.
Anywhere else the console.log is empty. It seems to me that the state is not persisting from the mutations, but I'm not sure why.
I have tried quite a few stackoverflow answers however, non of them fix the issues or I have no clue what I am reading in the post. I have also left of code from my code blocks to make this post more readable, such as imports or templates.
Store index.js
export default createStore({
state: {
subjects: [],
},
actions: {
getSubjects({ commit }) {
// Manages subjects, allow for display in column or Calendar view
axiosMain({
method: "get",
url: "/study/",
withCredentials: true,
})
.then((response) => {
commit("setSubjects", response.data);
})
},
},
mutations: {
setSubjects(state, subjectsToSet) {
state.subjects = subjectsToSet;
console.log(state.subjects) # Is a populated array
}
}
});
Main.js
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import VueGtag from "vue-gtag-next";
import store from "./store";
import "./assets/main.css";
createApp(App)
.use(router)
.use(store)
.use(VueGtag, {
property: {
id: "G-E4DPXQ96HB",
},
})
.mount("#app");
Home.vue
<template>
</template>
<script>
export default {
name: "Home",
data() {
return {
subjects: [],
};
},
mounted() {
this.callStoreSubjectAction();
this.setSubjectsToStoreSubject();
},
methods: {
callStoreSubjectAction() {
this.$store.dispatch("getSubjects");
},
setSubjectsToStoreSubject() {
this.subjects = this.$store.state.subjects;
console.log(this.$store.state.subjects); # Is an empty array
},
},
};
</script>

In the component, you're copying the value of this.$store.state.subjects before the axios call has completed. Wait for the promise to resolve first. To do that, you'll need to first return the promise from the action:
getSubjects({ commit }) {
return axiosMain({ // returning the promise
...
}
}
Waiting for the promise:
mounted() {
this.$store.dispatch("getSubjects").then(r => {
this.subjects = this.$store.state.subjects;
console.log(this.$store.state.subjects);
});
},
Better than this would be to remove subjects from your component data and use a computed instead to sync with the Vuex state:
import { mapState } from 'vuex';
computed: {
...mapState(['subjects']) // creates a computed `this.subjects`
}
Then you would only have to dispatch the action and the component will take care of the rest:
mounted() {
this.$store.dispatch("getSubjects");
}

Related

How to set my state from vuex to it's "original" form? [duplicate]

My state in vuex store is huge.
Is there a way to reset all the data in state in one go, instead of manually setting everything to null?
I have just found the great solution that works for me.
const getDefaultState = () => {
return {
items: [],
status: 'empty'
}
}
// initial state
const state = getDefaultState()
const actions = {
resetCartState ({ commit }) {
commit('resetState')
},
addItem ({ state, commit }, item) { /* ... */ }
}
const mutations = {
resetState (state) {
// Merge rather than replace so we don't lose observers
// https://github.com/vuejs/vuex/issues/1118
Object.assign(state, getDefaultState())
}
}
export default {
state,
getters: {},
actions,
mutations
}
Thanks to Taha Shashtari for the great solution.
Michael,
Update after using the below solution a bit more
So it turns out that if you use replaceState with an empty object ({}) you end up bricking reactivity since your state props go away. So in essence you have to actually reset every property in state and then use store.replaceState(resetStateObject). For store without modules you'd essentially do something like:
let state = this.$store.state;
let newState = {};
Object.keys(state).forEach(key => {
newState[key] = null; // or = initialState[key]
});
this.$store.replaceState(newState);
Update (from comments): What if one needs to only reset/define a single module and keep the rest as they were?
If you don't want to reset all your modules, you can just reset the modules you need and leave the other reset in their current state.
For example, say you have mutliple modules and you only want to reset module a to it's initial state, using the method above^, which we'll call resetStateA. Then you would clone the original state (that includes all the modules before resetting).
var currentState = deepClone(this.state)
where deepClone is your deep cloning method of choice (lodash has a good one). This clone has the current state of A before the reset. So let's overwrite that
var newState = Object.assign(currentState, {
a: resetStateA
});
and use that new state with replaceState, which includes the current state of all you modules, except the module a with its initial state:
this.$store.replaceState(newState);
Original solution
I found this handy method in Vuex.store. You can clear all state quickly and painlessly by using replaceState, like this:
store.replaceState({})
It works with a single store or with modules, and it preserves the reactivity of all your state properties. See the Vuex api doc page, and find in page for replaceState.
For Modules
IF you're replacing a store with modules you'll have to include empty state objects for each module. So, for example, if you have modules a and b, you'd do:
store.replaceState({
a: {},
b: {}
})
You can declare an initial state and reset it to that state property by property. You can't just do state = initialState or you lose reactivity.
Here's how we do it in the application I'm working on:
let initialState = {
"token": null,
"user": {}
}
const state = Vue.util.extend({}, initialState)
const mutations = {
RESET_STATE(state, payload) {
for (let f in state) {
Vue.set(state, f, initialState[f])
}
}
}
I am not sure what you use case is, but I had to do something similar. When a user logs out, I want to clear the entire state of the app - so I just did window.reload. Maybe not exactly what you asked for, but if this is why you want to clear the store, maybe an alternative.
If you do a state = {}, you will remove the reactivity of the properties and your getters mutations will suddenly stop working.
you can have a sub-property like:
state: {
subProperty: {
a: '',
lot: '',
of: '',
properties: '',
.
.
.
}
}
Doing a state.subProperty = {} should help, without losing the reactivity.
You should not have a state too big, break them down to different modules and import to your vuex store like so:
import Vue from 'vue'
import Vuex from 'vuex'
import authorization from './modules/authorization'
import profile from './modules/profile'
Vue.use(Vuex)
export const store = new Vuex.Store({
modules: {
authorization,
profile
}
})
now in your individual files:
// modules/authorization.js
import * as NameSpace from '../NameSpace'
import { someService } from '../../Services/something'
const state = {
[NameSpace.AUTH_STATE]: {
auth: {},
error: null
}
}
const getters = {
[NameSpace.AUTH_GETTER]: state => {
return state[NameSpace.AUTH_STATE]
}
}
const mutations = {
[NameSpace.AUTH_MUTATION]: (state, payload) => {
state[NameSpace.AUTH_STATE] = payload
},
}
const actions = {
[NameSpace.ASYNC_AUTH_ACTION]: ({ commit }, payload) => {
someService.login(payload.username, payload.password)
.then((user) => {
commit(NameSpace.AUTH_MUTATION, {auth: user, error: null})
})
.catch((error) => {
commit(NameSpace.AUTH_MUTATION, {auth: [], error: error})
})
}
}
export default {
state,
getters,
mutations,
actions
}
If you should want to clear the state you can just have a mutation implement:
state[NameSpace.AUTH_STATE] = {
auth: {},
error: null
}
Here's a solution that works in my app. I created a file named defaultState.js.
//defaultState.js
//the return value is the same as that in the state
const defaultState = () => {
return {
items: [],
poles: {},
...
}
}
export default defaultState
And then Where you want to use it
//anywhere you want to use it
//for example in your mutations.js
//when you've gotten your store object do
import defaultState from '/path/to/defaultState.js'
let mutations = {
...,
clearStore(state){
Object.assign(state, defaultState())
},
}
export default mutations
Then in your store.js
import Vue from 'vue';
import Vuex from 'vuex';
import actions from './actions';
import getters from './getters';
import mutations from './mutations'; //import mutations
import state from './state';
Vue.use(Vuex);
export default new Vuex.Store({
actions,
mutations,
state,
getters,
});
and That's it
If you want to reset your entire state you can use the built in replaceState method.
Given a state set in index.js:
const state = { user: '', token: '', products: [] /* etc. */ }
const initialStateCopy = JSON.parse(JSON.stringify(state))
export const store = new Vuex.Store({ state, /* getters, mutations, etc. */ })
export function resetState() {
store.replaceState(initialStateCopy)
}
Then in your vue component (or anywhere) import resetState:
import { resetState } from '#/store/index.js'
// vue component usage, for example: logout
{
// ... data(), computed etc. omitted for brevity
methods: {
logout() { resetState() }
}
}
Based on these 2 answers (#1 #2) I made a workable code.
My structure of Vuex's index.js:
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import { header } from './header'
import { media } from './media'
Vue.use(Vuex)
const store = new Vuex.Store({
plugins: [createPersistedState()],
modules: {
header,
media
}
})
export default store
Inside each module we need to move all states into separated var initialState and in mutation define a function resetState, like below for media.js:
const initialState = () => ({
stateOne: 0,
stateTwo: {
isImportedSelected: false,
isImportedIndeterminate: false,
isImportedMaximized: false,
isImportedSortedAsc: false,
items: [],
stateN: ...
}
})
export const media = {
namespaced: true,
state: initialState, // <<---- Our States
getters: {
},
actions: {
},
mutations: {
resetState (state) {
const initial = initialState()
Object.keys(initial).forEach(key => { state[key] = initial[key] })
},
}
}
In Vue component we can use it like:
<template>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
name: 'SomeName',
data () {
return {
dataOne: '',
dataTwo: 2
}
},
computed: {
},
methods: {
...mapMutations('media', [ // <<---- define module
'resetState' // <<---- define mutation
]),
logout () {
this.resetState() // <<---- use mutation
// ... any code if you need to do something here
}
},
mounted () {
}
} // End of 'default'
</script>
<style>
</style>
Call router.go() or this.$router.go()
That will refresh the page and your state will be reset to how it was when the user first loaded the app.
Myself has read above and implemented a solution. could help you as well!!
All objects stored in Vue act as an observable. So if reference of a value is changed/mutated it triggers the actual value to be changed too.
So, Inorder to reset the state the initial store modules has to be copied as a value.
On logging out of an user, the same value has to be assigned for each modules as a copy.
This can be achieved as following:
Step 1: Create a copy of your initial module.
// store.ts
// Initial store with modules as an object
export const initialStoreModules = {
user,
recruitment,
};
export default new Vuex.Store({
/**
* Assign the modules to the store
* using lodash deepClone to avoid changing the initial store module values
*/
modules: _.cloneDeep(initialStoreModules),
mutations: {
// reset default state modules by looping around the initialStoreModules
[types.RESET_STATE](state: any) {
_.forOwn(initialStoreModules, (value: IModule, key: string) => {
state[key] = _.cloneDeep(value.state);
});
},
}
});
Step 2: Call the action to mutate the state to initial state.
// user_action.ts
const logout = ({ commit }: any) => {
commit(types.LOGOUT_INIT);
new UserProxy().logout().then((response: any) => {
router.push({
name: 'login',
});
// reset the state
commit(types.RESET_STATE);
}).catch((err: any) => {
commit(types.LOGOUT_FAIL, err);
});
};
You could take it easy by tiny package: vuex-extensions
Check out the example on CodeSandbox.
Creating Vuex.Store
import Vuex from 'vuex'
import { createStore } from 'vuex-extensions'
export default createStore(Vuex.Store, {
plugins: []
modules: {}
})
Store resets to initial State
// Vue Component
this.$store.reset()
// Vuex action
modules: {
sub: {
actions: {
logout() {
this.reset()
}
}
}
}
You can do this
index.js
...
const store = new Vuex.Store({
modules: {
...
}
})
store.initialState = clone(store.state)
store.resetState = () => {
store.replaceState(store.initialState)
}
export default store
Other place
this.$store.resetState()
function initialState () {
return { /* .. initial state ... */ }
}
export default {
state: initialState,
mutations: {
reset (state) {
// acquire initial state
const s = initialState()
Object.keys(s).forEach(key => {
state[key] = s[key]
})
}
}
}
This is an official recommendation
issue
if you clear your complete vuex store use:
sessionStorage.clear();

Use fetch method inside vuex action

I created a store action that fetch api. When I'm trying to dispatch it from component in created lifecycle hook. I'm getting Cannot read property 'dispatch' of undefined error. I know there are several similar questions but none of them solved this issue.
I tried to dispatch it also in normal method and still get this error.
store.js
import Vue from "vue";
import Vuex from "Vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
categories: []
},
mutations: {
SET_CATEGORIES(state, categories) {
state.categories = categories;
}
},
actions: {
getCategories({ commit }) {
return fetch("https://api.chucknorris.io/jokes/categories")
.then(response => {
return response.json();
})
.then(jsonObj => {
commit("SET_CATEGORIES", jsonObj);
})
.catch(error => {
console.log(error);
});
}
}
});
And this is the component which I try to dispatch in -
<script>
export default {
data() {
return {
joke: "",
categories: [],
selectedCat: ""
};
},
computed: {
disabled() {
if (this.joke) {
return false;
} else {
return true;
}
}
},
methods: {
addToFavs: function() {
this.$emit("pushJoke", this.joke);
this.fetchJoke();
}
},
created() {
this.$store.dispatch('getCategories');
}
};
</script>
What am I doing wrong?
Start by adding
import { mapActions } from 'vuex'
in your script
then add to methods
methods: {
...mapActions([
'getCategories'
])
.
.
}
and alter your created method to
created() {
this.getCategories()
}
Furthermore, you might want to create a vuex action to replace that this.$emit("pushJoke", this.joke); line that you have, and map that in a similar way that you have mapped getCategories
That's because you missed to add your vuex store option to the root instance of Vue. To solve that import your store and attach it to your vue instance.
import { store } from '.store'
const app = new Vue({
store
})

How to pass data from vuex store through module to vue component?

I'm able to console data, as well as able to see data in vuex dev tool
but not able to display them in table. Please if someone could check
my code and tell me what is wrong with it. Thanks folks. I tried differents methods like async/await, promise, getters... but I was not able to to get the data, probably I was not calling it properly.
ROLE.VUE
<emplate>
<di>
<p v-for="(role, index) in roles :key="index">
</div>
</template>
<script>
import { mapState } from 'vuex'
export default ({
name: 'Role',
metaInfo: {
title: 'Role'
},
created () {
this.$store.dispatch('loadRoles').then((response) => { console.log(response) })
},
computed: {
...mapState([
'roles'
])
}
})
</script>
role.js
import Axios from 'axios'
export default {
// namespaced: true,
state: {
roles: [],
},
getters: {
roles (state) {
return state.roles
}
},
mutations: {
SET_ROLES (state, roles) {
state.roles = roles
}
},
actions: {
loadRoles ({ commit }) {
Axios.get('/settings/roles')
.then((response) => {
console.log(response.data)
// let roles = response.data
commit('SET_ROLES', response.data.roles)
})
}
}
}
index.js
import role from './role'
Vue.use(Vuex)
export const store = new Vuex.Store({
state: {
},
mutations: {
//
},
modules: {
role
},
actions: {
//
}
})
Main.js
import { store } from './store/store'
new Vue({
router,
store,
ValidationProvider,
render: h => h(App)
})
When loading from a module with mapState, you need to specify the name of the module you are loading from. Here is the proper syntax for your case:
...mapState('role', ['roles'])
The first argument is the module name, and the second is an array of state properties from that module.

Vue + Vuex using axios asynchrnously yet getters return empty array

My issue is getters that are returning initial state ([]).
in my component I have a created method that sets the axios call result into state.
created() {this.$store.dispatch("SET_STORIES");},
I have mapGetters in computed:
computed: {
...mapGetters(["GET_STORIES"])
},
And a method to get state:
methods: {
stories() {
return this.$store.getters.GET_STORIES;
}
}
mounted() is returning an empty array:
mounted() {
console.log("stories", this.$store.getters.GET_STORIES);
},
store.js
import Vue from "vue";
import Vuex from "vuex";
import axios from "axios";
import VueAxios from "vue-axios";
import chunk from "lodash/chunk";
Vue.use(Vuex, VueAxios, axios);
export default new Vuex.Store({
state: {
stories: [],
twoChunkStories: []
},
getters: {
GET_STORIES: state => {
return state.stories;
}
},
mutations: {
SET_STORIES(state, stories) {
state.stories = stories;
},
SET_CHUNKED_STORIES(state, stories) {
state.twoChunkStories= stories;
},
},
actions: {
SET_STORIES: async ({ commit }) => {
const options = {
headers: {
"Content-Type": "application/json"
}
};
let { data } = await axios.get(
"https://api.example.com/get.json",
options
);
if (data.meta.code === 200) {
let storiesArray = data.data.stories;
let chunkSize = 2;
commit("SET_STORIES", storiesArray);
let chunkedArray = chunk(storiesArray, chunkSize);
commit("SET_CHUNKED_STORIES", chunkedArray);
}
}
}
});
How can I make an axios async call that would have state set onload on the earliest lifecycle hook (I thought created() was the earliest hook) and be ready to be called out on mounted. I'm obviously doing something wrong asynchronously over the getters, I just don't know exactly what.
You didn't call your action method of SET_STORIES in your component, so the stories in your store will not get updated, first you need to call the action from your Vue component like
mounted() {
this.$store.actions.SET_STORIES
}
Also, I think you need to use a different logic here, because you don't know how long does it take to fetch the stories data from your server.
In your component you can create a variable named isDataLoaded and make it false initially.
In your component you can conditionally render your list like
<div v-if="!isDataLoaded">
Loading ...
</div>
<div v-if="isDataLoaded">
... your list goes here ...
</div>
In your mounted() method you need to update isDataLoaded after the action call like this so your list will show up in the screen
async mounted() {
await this.$store.actions.SET_STORIES
this.isDataLoaded = true
}

Property or method not defined on the instance but referenced during render I Vuex

I'm getting the following error.
[Vue warn]: Property or method "updateData" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
As far I can tell by the code, the method is there, so I'm stuck on something that I miss due to my ignorance of Vuex. I've googled the matter and got quite a few answers but none of them made me any wiser what to do. It seems to be something with scope, I'm sensing.
I also get the error below but I suspect that it's the same root cause for both so solving the one will resolve the other.
[Vue warn]: Invalid handler for event "click": got undefined
(found in component at ...)
The markup is as follow. I've checked that the path goes to the right location. At the moment I'm not sure at all how to even start to troubleshoot it. Any hints would be appreciated.
<template>
<div id="nav-bar">
<ul>
<li #click="updateData">Update</li>
<li #click="resetData">Reset</li>
</ul>
</div>
</template>
<script>
import { updateData, resetData } from "../vuex_app/actions";
export default {
vuex: {
getters: { activeDataRow: state => state.activeDataRow },
actions: { updateData, resetData }
}
}
</script>
Edit
After input I improved the export to include methods property like so. (Still the same error remaining, though.)
export default {
vuex: {
getters: { activeDataRow: state => state.activeDataRow },
actions: { updateData, resetData },
methods:{
updateData: () => this.$store.dispatch("updateData"),
resetData: () => this.$store.dispatch("resetData")
}
}
}
Do I have to do something extra in the store? It looks like this.
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const state = { dataRows: [], activeDataRow: {} };
const mutations = {
UPDATE_DATA(state, data) { state.dataRows = data; state.activeDataRow = {}; },
RESET_DATA(state) { state.dataRows = []; state.activeDataRow = {}; }
};
export default new Vuex.Store({ state, mutations });
You have to add the imported functions in the methods of Vue component, like following. You can take help of mapActions as explained in the documentation. This is needed to map this.updateDate to this.$store.dispatch('updateDate').
<script>
import { updateData, resetData } from "../vuex_app/actions";
import { mapActions } from 'vuex'
export default {
vuex: {
getters: { activeDataRow: state => state.activeDataRow },
actions: { updateData, resetData }
},
methods: {
...mapActions(['updateData', 'resetData'])
}
}
</script>
Edited
In case you dont want to use mapActions, you can use this.$store.dispatch as you are using in your example, however you need to have methods at vue compoenent level (documentation) and not insise vuex, as following:
export default {
vuex: {
getters: { activeDataRow: state => state.activeDataRow },
actions: { updateData, resetData }
},
methods:{
updateData: () => this.$store.dispatch("updateData"),
resetData: () => this.$store.dispatch("resetData")
}
}

Categories