two errors help me build with vuex modules
errors: unknown mutation type: setLoggedIn & unknown local mutation type: setLoggedIn, global type: auth/setLoggedIn
vuex version "vuex": "^4.0.0"
the problem occurs in the setLoggedInState(ctx) function
index.js
import Vuex from 'vuex'
import middleware from "./modules/middleware.js";
import auth from "./modules/auth";
export default new Vuex.Store({
namespaced: true,
modules: {
auth,
middleware
}
})
auth.js
const state = {
isLoggedIn: true,
};
const mutation = {
setLoggedIn(state, payload, ) {
state.isLoggedIn = payload;
},
};
const actions = {
setLoggedInState(ctx) {
return new Promise((resolve) => {
if (localStorage.getItem('token')) {
ctx.commit('setLoggedIn', true, {root: true});
resolve(true)
} else {
ctx.commit('setLoggedIn', false, {root: true});
resolve(false)
}
});
},
}
const getters = {
loggedIn(state) {
return state.isLoggedIn;
},
export default {
namespaced: true,
state,
mutation,
actions,
getters
}
Dashboard
import {mapActions} from 'vuex'
export default {
name: "Dashboard",
data: () => ({}),
created() {
this.checkUserState();
},
methods: {
...mapActions({
checkUserState: 'auth/setLoggedInState',
}),
I don’t understand how to fix errors I tried many ways I hope for your help
When you learn something new, please check for missing '; , .' etc.
And be sure that you write 'const mutations' not 'const mutation', following the documentation saving hours))
Related
I have a file that I'm using to store a global variable that gets changed by 'login' or 'logout' functions. I want to write a unit test that has the value of 'isLoggedIn' set to true or false, then checks for expected behaviour. I can't figure out what I need to do to be able to use the value, this is my file:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
loggedIn: false,
},
mutations: {
login(state) {
state.loggedIn = true;
},
logout(state) {
state.loggedIn = false;
state.userID = null;
},
},
actions: {
login({ commit }) {
commit('login');
},
logout({ commit }) {
commit('logout');
},
},
getters: {
isLoggedIn: (state) => state.loggedIn,
},
});
And this is the test I'm trying to create:
import { expect } from 'chai';
import { shallowMount } from '#vue/test-utils';
import Home from '#/views/images.vue';
describe('Images.vue', () => {
it('shows that you are logged in', () => {
const welcome_text = 'You are logged in.';
this.$store.dispatch('login');
const wrapper = shallowMount(Home, {});
expect(wrapper.text()).to.include(welcome_text);
});
});
Your getter method isn't returning anything.
https://vuex.vuejs.org/guide/getters.html#property-style-access
Once you change your getter to:
getters: {
isLoggedIn: (state) => return state.loggedIn,
},
You should be able to retrieve this value using:
this.$store.getters.isLoggedIn
i have created two store modules and I did the import into main store.
When I load my drawer view, I am getting the next error.
What am I doing wrong here
error:vuex.esm.js [vuex] unknown mutation type: SET_DRAWER
//Drawer.vue
.........
computed: {
...mapState("navstore", ["barColor", "barImage"]),
drawer: {
get() {
return this.$store.state.navstore.drawer;
},
set(val) {
this.$store.commit("SET_DRAWER", val);
},
},
computedItems() {
return null;
//this.items.map(this.mapItem);
},
profile() {
return {
avatar: true,
title: "Gestan",
};
},
},
methods: {},
.........
.........
//store/index.js
import Vue from "vue";
import Vuex from "vuex";
import { default as auth } from ".auth";
import { default as navstore } from "./navStore";
Vue.use(Vuex);
export default new Vuex.Store({
modules: { auth: auth, navstore: navstore },
});
//navstore.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const SET_BAR_IMAGE = "NAVSTORE/SET_BAR_IMAGE";
const SET_DRAWER = "NAVSTORE/SET_DRAWER";
export default {
namespaced: true,
state: {
barColor: "rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)",
barImage:
"https://demos.creative-tim.com/material-dashboard/assets/img/sidebar-1.jpg",
drawer: null,
},
mutations: {
[SET_BAR_IMAGE](state, payload) {
state.barImage = payload;
},
[SET_DRAWER](state, payload) {
state.drawer = payload;
},
},
actions: {
actionSetDrawer({ commit }, payload) {
commit(SET_DRAWER, payload);
},
},
};
//auth.js
import Vue from "vue";
import Vuex from "vuex";
import * as storage from "#/store/storage";
import services from "#/services/api/AuthenticationService";
Vue.use(Vuex);
const SET_USER = "AUTH/SET_USER";
const SET_TOKEN = "AUTH/SET_TOKEN";
export default {
namespaced: true,
state: {
token: null,
user: null,
isUserLoggedIn: false,
},
mutations: {
[SET_TOKEN](state, token) {
state.token = token;
state.isUserLoggedIn = !!token;
},
[SET_USER](state, user) {
state.user = user;
},
},
getters: {
isAuthenticated: (state) => !!state.token,
// authStatus: state => state.status
},
actions: {
actionDoLogin({ dispatch }, payload) {
return services.login(payload).then((res) => {
dispatch("actionSetUser", res.data.user);
dispatch("actionSetToken", res.data.token);
});
},
};
You need to remove prefixes with slash from mutation names because your modules namespaced and you will always access this mutations outside indicating a module name like this moduleName/mutation.
For instance:
const SET_BAR_IMAGE = "NAVSTORE/SET_BAR_IMAGE";
const SET_DRAWER = "NAVSTORE/SET_DRAWER";
// should be
const SET_BAR_IMAGE = "SET_BAR_IMAGE";
const SET_DRAWER = "SET_DRAWER";
Because the SET_DRAWER mutation is inside a navspaces module you should call it indicating a module name:
this.$store.commit("navstore/SET_DRAWER", val);
Don't try to call actions inside actions like this:
actionDoLogin({ dispatch }, payload) {
return services.login(payload).then((res) => {
dispatch("actionSetUser", res.data.user);
dispatch("actionSetToken", res.data.token);
});
},
Use mutations in a desired combination:
actionDoLogin({ dispatch }, payload) {
return services.login(payload).then((res) => {
commit(SET_USER, res.data.user);
commit(SET_TOKEN, res.data.token);
});
},
I'm new to jest and am trying to write a unit test that relies on the value of a store property.
I tried to create a new mock store in my test (I already have a mock store for a different test), but for some reason, I keep getting the error
TypeError: Cannot read property 'state' of undefined
My tests are:
import { shallowMount, createLocalVue,} from '#vue/test-utils';
import userButtons from '#components/user-profile/UserButtons.vue';
import Vuex from 'vuex';
import { defaultValues, } from '#store/api/userButtons.js';
const localVue = createLocalVue();
localVue.use(Vuex);
describe('UserButtons', () => {
let actions;
let store;
let storeIsAdded;
beforeEach(() => {
actions = {
getUserInfo: jest.fn(),
};
store = new Vuex.Store({
modules: {
userButtons: {
namespaced: true,
actions,
state: {
userButton: defaultValues,
},
mutations: {
setUserButton: jest.fn(),
},
},
},
});
storeIsAdded = new Vuex.Store({
state: {
isItemAdded: true,
},
});
});
test('vuex called on create', () => {
shallowMount(UserButtons, { store, localVue, propsData: { id: 3406304, }, });
expect(actions.getUserInfo).toHaveBeenCalled();
});
test('renders correctly', () => {
const wrapper = shallowMount(UserButtons, { store, localVue, propsData: { id: 3406304, }, });
expect(wrapper.element).toMatchSnapshot();
});
test('indicates remove if isItemAdded is true', () => {
const wrapper = shallowMount(UserButtons, { storeIsAdded, localVue, propsData: { id: 3406304, }, });
expect(wrapper.find('.button-action.my-items').text()).toBe('- Remove from My Items');
});
});
The first two tests, which just use defaultValues for my store, pass.
The last test, 'indicates remove if isItemAddedis true, is the one that fails, and is using the mock store,storeIsAdded`.
If anyone has any insight, it would be much appreciated!!!
EDIT:
Even if I modify my mock store to be more similar to the store that seems to be working, like this:
storeIsInList = new Vuex.Store({
modules: {
userButton: {
namespaced: true,
actions,
state: {
userButton: {
isItemAdded: true,
},
},
},
},
});
I get the same error.
It seems the error is when accessing the store state in the component. So, my guess is that the store maybe need to be module/namespace, i.e.
storeIsInList = new Vuex.Store({
modules: {
userButtons: {
namespaced: true,
actions,
state: {
userButton: {
isItemAdded: true,
},
},
},
},
});
And as #il0v3d0g stated, maybe the namespace name is wrong.
So, in my project (Vue-cli + TypeScript) I need to store user data to locaStorage. For this purpose I decide to use vuex-persist (npm plugin) alongside with vuex. But in DevTool, in localStorage doesn't appear anything. What is wrong in my code. Thank you in advance.
In precedent project I already used this combination of tools, and they work fine. In this project I use the same configuration, and it doesn't work . And this is the most strange thing.
This is StructureModule.ts
import { ActionTree, MutationTree, GetterTree, Module } from "vuex";
const namespaced: boolean = true;
interface IDataStructure {
name: string;
type: string;
description: string;
}
interface IStructureState {
name: string;
description: string;
props: IDataStructure[];
}
export interface IState {
structures: IStructureState[];
}
export const state: IState = {
structures: [
{
name: "",
description: "",
props: [
{
name: "",
type: "",
description: "",
},
],
},
],
};
export const actions: ActionTree<IState, any> = {
addNewDataStructure({ commit }, payload: IStructureState): void {
commit("ADD_DATA_STRUCTURE", payload);
},
updateDataStructure({ commit }, payload: IStructureState): void {
commit("UPDATE_EXISTING_DATA_STRUCTURE", payload);
},
clearDataStructure({ commit }, { name }: IStructureState): void {
commit(" CLEAR_DATA_STRUCTURE", name);
},
};
export const mutations: MutationTree<IState> = {
ADD_DATA_STRUCTURE(state: IState, payload: IStructureState) {
if (state.structures[0].name === "") {
state.structures.splice(0, 1);
}
state.structures.push(payload);
},
CLEAR_DATA_STRUCTURE(state: IState, name: string) {
state.structures.filter((structure: IStructureState) => {
if (structure.name === name) {
state.structures.splice( state.structures.indexOf(structure), 1);
}
});
},
UPDATE_EXISTING_DATA_STRUCTURE(state: IState, payload: IStructureState) {
state.structures.map((structure: IStructureState) => {
if (structure.name === payload.name) {
state.structures[state.structures.indexOf(structure)] = payload;
}
});
},
};
export const getters: GetterTree<IState, any> = {
dataStructureByName(state: IState, structName: string): IStructureState[] {
const structure: IStructureState[] = state.structures.filter((struct: IStructureState) => {
if (struct.name === structName) {
return struct;
}
});
return structure;
},
dataStructures(): IStructureState[] {
return state.structures;
},
};
export const StructureModule: Module<IState, any> = {
namespaced,
state,
mutations,
actions,
getters,
};
This is index.ts
import Vue from "vue";
import Vuex, { ModuleTree } from "vuex";
import VuexPersistence from "vuex-persist";
import { StructureModule , IState} from "./modules/StructureModule";
Vue.use(Vuex);
const storeModules: ModuleTree<IState> = {
StructureModule,
};
const vuexPersistentSessionStorage = new VuexPersistence({
key: "test",
modules: ["StructureModule"],
});
export default new Vuex.Store<any>({
modules: storeModules,
plugins: [vuexPersistentSessionStorage.plugin],
});
This is main.ts
import store from "#/store/index.ts";
import * as $ from "jquery";
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
global.EventBus = new Vue();
(global as any).$ = $;
Vue.config.productionTip = false;
console.log(store);
new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");
This is vue.config.js
module.exports = {
transpileDependencies: ["vuex-persist"],
};
This is store in vue-devtool
And this is dev-tool localStorage
I expect that in localstorage to appear an storage with key "test" with predefined values, but instead of this localStorage is empty.
As said in the guide
The only way to actually change state in a Vuex store is by committing
a mutation
https://vuex.vuejs.org/guide/mutations.html
I don't see any mutation in your code.
Otherwise, you should take a look at https://github.com/robinvdvleuten/vuex-persistedstate, it seems to be more popular, and I've been using it without any problem.
Usage is very simple : you just need to declare a plugin inside your store:
import createPersistedState from 'vuex-persistedstate'
const store = new Vuex.Store({
// ...
plugins: [createPersistedState()],
})
I found solution for this problem.
In my case i just remove namespaced from
export const StructureModule: Module<IState, any> = {
namespaced, <----- This
state,
mutations,
actions,
getters,
};
It seems namespaced should be used only if you have more than one module.
Im creating a simple spa todo app with vue + vuex.
My problem is that each module will have the same 5 default method for manipulating the state. If i decide to change the default state management behavior then i have to go to every module and update them. The five actions that all modules should have when written out in the module work, but as soon as i import the exact same object and assign it to the actions property on the module the action cant be found. and i get this error [vuex] unknown action type: namespacedTodos/getCollection
// This is in a component
mounted: function () {
this.$store.dispatch('namespacedTodos/getCollection')
},
// import baseActions from '../base-actions'
import baseGetters from '../base-getters'
import baseMutations from '../base-mutations'
import axios from 'axios/index'
import mainStore from '../index'
// import _ from 'lodash'
const namespacedTodos = {
namespaced: true,
state: {
collection: [],
defaultInstance: {},
collectionLoaded: false,
url: 'api/todos',
namespace: 'namespacedTodos'
},
mutations: baseMutations,
getters: baseGetters,
actions: {
getCollection: function ({state, commit}) {
if (state.collectionLoaded) {
return Promise.resolve({data: state.collection})
}
return axios.get(`${mainStore.state.baseUrl}/${state.url}`)
.then((response) => {
commit(`setCollection`, response.data.data)
return response
})
.catch((response) => {
console.log('Error Response: ', response)
throw response
})
}
},
strict: process.env.NODE_ENV !== 'production'
}
export default namespacedTodos
The above Code Works But the following Dose Not
import baseActions from '../base-actions'
import baseGetters from '../base-getters'
import baseMutations from '../base-mutations'
const namespacedTodos = {
namespaced: true,
state: {
collection: [],
defaultInstance: {},
collectionLoaded: false,
url: 'api/todos',
namespace: 'namespacedTodos'
},
mutations: baseMutations,
getters: baseGetters,
actions: baseActions,
strict: process.env.NODE_ENV !== 'production'
}
export default namespacedTodos
import axios from 'axios'
import _ from 'lodash'
import mainStore from './index'
export default {
getCollection: function ({state, commit}) {
if (state.collectionLoaded) {
return Promise.resolve({data: state.collection})
}
console.log('this: ', this)
console.log('Namespace: ', state.namespace)
return axios.get(`${mainStore.state.baseUrl}/${state.url}`)
.then((response) => {
commit(`setCollection`, response.data.data)
return response
})
.catch((response) => {
console.log('Error Response: ', response)
throw response
})
},
}
import baseActions from '../base-actions'
import baseGetters from '../base-getters'
import baseMutations from '../base-mutations'
const todos = {
namespaced: true,
state: {
collection: [],
defaultInstance: {},
collectionLoaded: false,
url: 'api/todos'
},
// The mutations get namespaced!!
mutations: Object.assign(baseMutations, {}),
// The getters get namespaced!!
getters: Object.assign(baseGetters, {}),
// The actions get namespaced!!
actions: Object.assign(baseActions, {
// any methods defined here will also be available
// You can over write existing methods when nessicary
}),
strict: process.env.NODE_ENV !== 'production'
}
export default todos