I have a Vue2 sample app and want to add a Vuex store with a todos module. Inside the store folder I changed the index.js file to
import Vue from "vue";
import Vuex from "vuex";
import * as todos from "./modules/todos/index.js";
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
todos
},
});
Inside
/store/modules/todos
I created the following files
index.js
import * as state from "./state.js";
import * as getters from "./getters.js";
export const module = {
namespaced: true,
state,
getters,
};
state.js
export const state = {
todos: []
}
getters.js
export const getters = {
todos(state) {
return state.todos;
}
};
Inside my component I want to access the getter:
<script>
import { mapGetters } from "vuex";
export default {
computed: {
...mapGetters("todos", ["todos"]), // namespace.getter
},
};
</script>
Unfortunately I get this error when loading the component
[vuex] module namespace not found in mapGetters(): todos/
Does someone know what's wrong or missing here? Thanks for help
I think your import/export statements are the culprit.
Try this:
/store.js
import Vue from "vue";
import Vuex from "vuex";
import todos from "./modules/todos";
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
todos
},
});
/store/modules/todos/index.js
import state from "./state";
import getters from "./getters";
const todos = {
namespaced: true,
state,
getters,
};
export default todos;
The other files seem fine.
Work for me
Base API URL
project/src/api/common.js
import axios from 'axios'
export const HTTP = axios.create({
baseURL: 'http://api-url',
})
Base element project/src/api/element.js
import {HTTP} from './common'
function createHTTP(url) {
return {
async post(config) {
return HTTP.post(`${url}`, config).then(response => {
console.log(response)
return response.data
})
},
async get(element) {
return HTTP.get(`${url}${element.id}/`)
},
async patch(element) {
console.log(element)
return HTTP.patch(`${url}${element.id}/`, element).then(response => {
console.log(response)
return response.data
})
},
async delete(id) {
HTTP.delete(`${url}${id}/`)
return id
},
async list(queryParams = '') {
return HTTP.get(`${url}${queryParams}`).then(response => {
return response.data.results
})
}
}
}
export const Todos = createHTTP(`/todos/`)
Your store project/src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import todos from "#/store/modulse/todos";
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
todos,
}
})
Your mutations types project/src/store/mutation-types.js
export const SET_TODOS ='SET_TODOS'
export const PATCH_TODO ='PATCH_TODO'
export const DELETE_TODO ='DELETE_TODO'
export const CREATE_TODO ='CREATE_TODO'
Your module project/src/store/modulse/todos.js
import {
Todos,
} from '#/api/elements'
import {
SET_TODOS, PATCH_TODO, DELETE_TODO, CREATE_TODO
} from '../mutation-types'
// Getters
export default {
state: {
todos: []
},
getters: {
getTodos(state) {
return state.todos
},
},
// Mutations
mutations: {
[SET_TODOS](state, todos) {
state.todos = todos
},
[PATCH_TODO](state, todos) {
let id = todos.id
state.todos.filter(todos => {
return todos.id === id
})[0] = todos
},
[CREATE_TODO](state, todo) {
state.todos = [todo, ...state.todos]
},
[DELETE_TODO](state, {id}) {
state.todos = state.todos.filter(todo =>{
return todo.id !==id
})
},
},
// Actions
actions: {
async setTodos({commit}, queryParams) {
await Todos.list(queryParams)
.then(todos => {
commit(SET_TODOS, todos)
}).catch((error) => {
console.log(error)
})
},
async patchTodo({commit}, todoData) {
await Todos.patch(todoData)
.then(todo => {
commit(PATCH_TODO, todo)
}).catch((error) => {
console.log(error)
})
},
async deleteTodo({commit}, todo_id) {
await Todos.delete(todo_id)
.then(resp => {
commit(DELETE_TODO, todo_id)
}).catch((error) => {
console.log(error)
})
},
async createTodo({commit}, todoData) {
await Todos.create(todoData)
.then(todo => {
commit(CREATE_TODO, todo)
}).catch((error) => {
console.log(error)
})
},
}
In your project/src/main.js
import Vue from 'vue'
import store from './store'
import App from './App.vue'
import Axios from 'axios'
Vue.prototype.$http = Axios;
new Vue({
store,
render: h => h(App),
}).$mount('#app')
In your project/src/App.vue
import {mapActions, mapGetters} from "vuex";
export default {
name: 'App',
components: {},
data() {
return {}
},
methods: {
...mapActions(['setTodos','patchTodo','createTodo','deleteTodo']),
},
computed: {
...mapGetters(['getTodos']),
},
async mounted() {
await this.setTodos()
},
}
Related
This is my code. Can some please help me figure out the error.I am using jest to test out my frontend which I have built using Vue.The line const localVue = createLocalVue(); is giving out the error TypeError: (0 , _testUtils.createLocalVue) is not a function
import { createLocalVue,shallowMount } from '#vue/test-utils'
import Vuex from 'vuex'
import getters from '../../src/store/module/auth/getters.js'
import TheHeader from '#/components/layout/TheHeader.vue'
// const store = new Vuex.Store({
// state: {
// user:null,
// token:'',
// expiresIn:null,
// isUserLoggedIn:false,
// isAdminLoggedIn:false,
// }
// })
describe('TheHeader', () => {
const localVue = createLocalVue();
localVue.use(Vuex);
let store
let state
it('Checks whether the login is correctly displayed', () => {
const cmp = shallowMount(TheHeader, { store,localVue})
expect(cmp.name()).toMatch('TheHeader')
expect(cmp.vm.isLoggedIn()).toBe(false)
})
})
createLocalVue was removed in version 2 of #vue/test-utils, which explains why it's undefined in your example.
To install a Vue plugin (such as Vuex), use the global.plugins mounting option
To mock instance APIs (such as this.$store), use the global.mocks mounting option
import Vuex from 'vuex'
import { shallowMount } from '#vue/test-utils'
import TheHeader from '#/components/TheHeader.vue'
const store = /* Vuex store */
const cmp = shallowMount(TheHeader, {
global: {
plugins: [Vuex],
// OR:
mocks: {
$store: store,
}
}
})
import { mount } from '#vue/test-utils'
import { createApp } from 'vue'
import { createStore } from 'vuex'
import App from '#/views/Home'
creating a fake store
const store = createStore({
state() {
return {
count: 0,
user: {},
}
},
mutations: {
increment(state) {
state.count += 1
},
},
})
Creating the Component
const app = createApp(App)
app.use(store)
let wrapper
beforeEach(() => {
wrapper = mount(App, {
global: {
plugins: [store],
},
computed: { showAlert: () => false },
})
})
now you can do the test
test('Home', async () => {
expect(wrapper.vm.showAlert).toBe(false)
})
guy. I'm novice programmer.
I have question for nuxt use vuex get data for api.
so data call in vue value null but in dev tool vue has data.
How to use getters in nuxt.
This image from dev tool.
In getters and state chachange: menuList has array data but in component not data.
This image from component
Component MenuList> computed> menuList: undefined.
This my menu_list.vue code.
computed: {
menuList () {
// eslint-disable-next-line no-console
return this.$store.getters.getMenuList
}
},
beforeCreated () {
// eslint-disable-next-line no-console
console.log(this.$store.state)
this.$store.dispatch('chachang/fetchMenu')
},
created () {
// eslint-disable-next-line no-console
console.log(this.$store.state)
this.$store.dispatch('chachang/fetchMenu')
}
This vuex code.
Chachang/state.js
export default () => ({
menuList: []
})
Chachang/actions.js
export default {
async fetchMenu ({ commit }) {
const response = await this.$axios.get('https://hlkittipan.github.io/rock-paper-scissors/menu.json')
commit('SET_MENU', response.data)
}
}
Chachang/mutations.js
export default {
SET_MENU (state, menu) {
state.menuList = menu
}
}
Chachang/getters.js
export default {
getMenuList: (state) => {
return state.menuList
}
}
This store/index.js
import chachangActions from './chachang/actions'
import chachangStates from './chachang/state'
import chachangGetters from './chachang/getters'
import chachangMutations from './chachang/mutations'
export const state = () => ({
...chachangStates.state,
})
export const mutations = {
...chachangMutations.mutations,
}
export const actions = {
...chachangActions.actions
}
export const getters = {
...chachangGetters.getters
}
Try this.
async beforeMount () {
const data = await this.$store.dispatch('chachang/fetchMenu')
// eslint-disable-next-line no-console
console.log(data)
},computed: {
menuList () {
// eslint-disable-next-line no-console
return this.$store.getters['chachang/getMenuList']
}
},
I will advice you to use mapActions and mapGetters that are imported from vuex.
import { mapGetters, mapActions } from 'vuex'
export default{
...
methods:{
...mapActions('chachang',[ 'fetchMenu' ])
},
mounted(){
this.fetchMenu() // better to use fetchData instead
}
computed:{
...mapGetters('chachang', [ 'menuList' ])
}
..
}
Please tell me how instead of {id} when getter call, take its id and insert it into the link with the request in vuex
industry.js
import { INDUSTRY } from '#/utils/store/getters.names.js'
import { FETCH_INDUSTRY } from '#/utils/store/actions.names.js'
import { SET_INDUSTRY, SET_INDUSTRY_ERROR } from '#/utils/store/mutations.names.js'
import { API_ENDPOINT } from '#/utils/store/endpoints.js'
export const state = () => ({
industry: [],
industryError: false
})
export const getters = {
[INDUSTRY]: state => state.industry
}
export const actions = {
[FETCH_INDUSTRY] ({ commit }, id) {
this.$axios.$get(`${API_ENDPOINT}/pages/?child_of=${id}&type=pages.IndustryEquipmentCategoryPage&fields=*`).then((data) => {
commit(SET_INDUSTRY, data)
}).catch((e) => {
commit(SET_INDUSTRY_ERROR)
})
}
}
export const mutations = {
[SET_INDUSTRY] (state, industry) {
state.industryError = false
state.industry = industry
},
[SET_INDUSTRY_ERROR] (state) {
state.industry = []
state.industryError = true
}
}
index.js
import { FETCH_MENU, FETCH_SETTINGS, FETCH_INDUSTRY } from '#/utils/store/actions.names.js'
export const state = () => ({})
export const actions = {
async nuxtServerInit ({ dispatch }) {
dispatch(`menu/${FETCH_MENU}`)
dispatch(`settings/${FETCH_SETTINGS}`)
dispatch(`industry/${FETCH_INDUSTRY}`)
}
}
actions.names.js
export const FETCH_INDUSTRY = 'fetchIndustry'
getters.names.js
export const INDUSTRY = 'industry'
mutations.names.js
export const SET_INDUSTRY = 'setIndustry'
export const SET_INDUSTRY_ERROR = 'SetIndustryError'
i cannot pass id to fetch getter data. how can i pass params id in getters please tell me
IndustryEquipmentIndexPage.vue
<template>
<div class="eqmodel-mainwrap">
</div>
</template>
<script>
import {
Component,
Getter,
Prop,
Action,
Mutation,
Vue,
mixins,
Watch
} from "nuxt-property-decorator";
import { PhCaretRight, PhCaretLeft } from "phosphor-vue";
import { INDUSTRY } from "~/utils/store/getters.names";
import { FETCH_INDUSTRY } from "~/utils/store/actions.names";
import { SET_INDUSTRY,SET_INDUSTRY_ERROR } from "~/utils/store/mutations.names";
import { PAGES_ENDPOINT } from "#/utils/store/endpoints.js";
import { gsap, TimelineMax, Power2, Power1, clearProps } from "gsap/all";
import axios from "axios";
import { directive } from "vue-awesome-swiper";
#Component({
name: "IndustryEquipmentIndexPage",
components: {
PhCaretRight,
PhCaretLeft
}
})
export default class IndustryEquipmentIndexPage extends Vue {
#Prop() pageData;
#Action(FETCH_INDUSTRY) fetchIndustry;
#Mutation(SET_INDUSTRY) setIndustry;
#Getter(`industry/${INDUSTRY}`) industry;
get HOST() {
return process.env.HOST;
}
}
</script>
According to Vue documentation you can do that with method style access.
export const getters = {
[INDUSTRY]: state => (id) => state.industry.find(smthg => smthg.id === id)
}
I have a vuex store like this:
// store.js
import Vuex from 'vuex'
import router from '../router' // this is a vuejs router
export const actions = {
async load({ dispatch, commit }) {
if (router.currentRoute.name === 'one-route') {
dispatch('oneModule/oneAction', null, { root: true })
}
}
}
export default new Vuex.Store({
state,
actions,
...
})
I would like to test it with Jest.
// store.test.js
import { createLocalVue } from '#vue/test-utils'
import Vuex from 'vuex'
import VueRouter from 'vue-router'
import { actions } from './store'
const localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(VueRouter)
describe('store tests', () => {
let store, router, oneAction
beforeEach(() => {
oneAction = jest.fn()
const modules = {
oneModule: {
namespaced: true,
actions: { oneAction }
}
}
store = new Vuex.Store({ actions, modules })
router = new VueRouter({ routes: [{ name: 'one-route' }] })
}
test('call module action if one-route is selected', async () => {
router.push({ name: 'one-route' })
await store.dispatch('load')
expect(oneAction).toHaveBeenCalled()
})
}
This makes the following error:
Expected mock function to have been called, but it was not called.
What is the correct way to mock the router to make this test pass?
Thank you
I'm trying to split up my Nuxt Vuex store files into separate files. And NOT have all Vuex getters, mutations and actions into one huge file. This demo project is on Github by the way.
I'v read this official Nuxt Vuex Store documentation; but can't seem to get it working. It's a bit vague on where to put stuff.
I have the following in these files:
Below is my: store/index.js
import Vue from "vue";
import Vuex from "vuex";
import Auth from "./modules/auth";
Vue.use(Vuex);
export const store = () => {
return new Vuex.Store({
state: {
},
modules: {
Auth
}
})
}
This is in my: store/auth.js
const state = () => {
username: null
};
const getters = {
username: state => {
return state.username;
},
isAuthenticated: state => {
return state.username != null;
}
};
const mutations = {
login: (vuexContext, username) => {
vuexContext.username = username;
this.$router.push("/dashboard");
},
logout: vuexContext => {
vuexContext.username = null;
this.$router.push("/");
}
};
const actions = {
};
export default {
state,
getters,
mutations,
actions,
};
And finally in my: pages/index.vue
This is where I'm calling that login mutation:
<script>
export default {
layout: "non-logged-in",
data() {
return {
username: null
}
},
methods: {
onSubmit() {
this.$store.commit("login", this.username);
}
}
}
</script>
The error I'm getting:
[vuex] unknown mutation type: login
What am I doing wrong here? I thought i'm importing all the stuff correctly in the store/index.js
You have to export your store constant like this inside your store/index.js file:
export default store
Put this code line at the end of your file.
So as #jeremy.raza described this is what I changed in order to get it working:
store/index.js
import Vue from "vue";
import Vuex from "vuex";
import Auth from "./modules/auth";
Vue.use(Vuex)
const store = () => {
return new Vuex.Store({
state: {
},
modules: {
Auth
}
})
}
export default store;
Changes in the store/auth.js
Note the changes in how I wrote the state, getters and mutations method notation.
const state = () => ({
username: null
});
const getters = {
username(state) {
return state.username;
},
isAuthenticated(state) {
return state.username != null;
}
};
const mutations = {
login(vuexContext, username) {
vuexContext.username = username;
this.$router.push("/dashboard");
},
logout(vuexContext) {
vuexContext.username = null;
this.$router.push("/");
}
};
const actions = {
};
export default {
state,
getters,
mutations,
actions,
};