i'm trying to toggle a sidebar in my nuxt project
I have this in my store;
export const state = () => ({
isOpen: false
})
export const mutations = {
toggleSideBar (state) {
state.isOpen = !state.isOpen
}
}
export const getters = {
getDrawerState(state) {
return state.isOpen
}
}
in my navbar that contains the button, I have this:
import{mapMutations, mapGetters} from 'vuex'
...mapMutations({
toggleSideBar: "isOpen/toggleSideBar"
})
I have this is my default that where my class will be toggled:
import {mapGetters, mapMutations} from 'vuex'
computed:{
...mapGetters({
isOpen:'isOpen/getDrawerState'
})
}
Related
I'm using vue 3 with composition api and vuex 4, I've done it this way before but now its throwing that error.
Here's my store/index.js
import { createStore } from "vuex";
export const store = new createStore({
state: {
patient: [],
},
mutations: {
setPatient(state, payload) {
state.patient = payload;
},
},
getters: {
getPatient(state) {
return state.patient;
},
getAppointment(state) {
return state.patient.appointments;
},
},
})
app.js
require('./bootstrap');
import { createApp, h } from 'vue';
import { createInertiaApp } from '#inertiajs/inertia-vue3';
import { InertiaProgress } from '#inertiajs/progress';
import {store} from './Store'
const { RayPlugin } = require('vue-ray');
window.$ = window.jQuery = require("jquery");
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => require(`./Pages/${name}.vue`),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props) })
.use(plugin)
.use(store)
.use(RayPlugin, { interceptErrors: true, host: '127.0.0.1', port: 23517 })
.mixin({ methods: { route } })
.mount(el);
},
});
InertiaProgress.init({ color: '#4B5563' });
And following the documentation, on my component I did the following:
import { useStore } from 'vuex'
import {onMounted, reactive, ref} from "vue";
export default {
props: {
patient: {
type: Object,
required: true
}
},
setup(props) {
const store = useStore();
onMounted(() => {
store.commit('setPatient', props.patient);
})
}
}
So far I've done this before, but using the composition api is new for me, so I couldn't find where the error is
I am building an app using NUXT js. I am also using the store module mode because using classic mode returned some depreciation issue.
The PROBLEM is I get [vuex] unknown mutation type: mobilenav/showmobilenav error in my console.
so below are my stores
store/index.js
export const state = () => ({
})
export const mutations = ({
})
export const actions = ({
})
export const getters = ({
})
store/mobilenav.js
export const state = () => ({
mobilenav: false
})
export const mutations = () => ({
showmobilenav(state) {
state.mobilenav = true;
},
hidemobilenav(state) {
state.mobilenav = false;
}
})
export const getters = () => ({
ismobilenavvisible(state) {
return state.dropdown;
}
})
the VUE file that calls the mutation
<template>
<div class="bb" #click="showsidenav">
<img src="~/assets/svg/burgerbar.svg" alt="" />
</div>
</template>
<script>
export default {
methods: {
showsidenav() {
this.$store.commit("mobilenav/showmobilenav");
console.log("sidenav shown");
},
},
}
</script>
<style scoped>
</style>
Here is a more detailed example on how to write it.
/store/modules/custom_module.js
const state = () => ({
test: 'default test'
})
const mutations = {
SET_TEST: (state, newName) => {
state.test = newName
},
}
const actions = {
actionSetTest({ commit }, newName) {
commit('SET_TEST', newName)
},
}
export const myCustomModule = {
namespaced: true,
state,
mutations,
actions,
}
/store/index.js
import { myCustomModule } from './modules/custom_module'
export default {
modules: {
'custom': myCustomModule,
},
}
/pages/test.vue
<template>
<div>
<button #click="actionSetTest('updated test')">Test the vuex action</button>
</div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
methods: {
...mapActions('custom', ['actionSetTest']),
}
</script>
I try to implement vuex modules and understand usage. While trying to import modules in my home.vue, I have found this solution:
import { FETCH_INDEX_ARTICLES } from "#/store/types/actions.type.js";
// imports this => export const FETCH_INDEX_ARTICLES = "fetchIndexArticles"
import { mapGetters, mapActions} from 'vuex'
export default {
name: "Home",
data() {
return {}
},
computed: {
...mapGetters(['articles']),
},
methods: {
...mapActions([FETCH_INDEX_ARTICLES])
}
created() {
this.$store.dispatch(FETCH_INDEX_ARTICLES);
}
};
but instead I get
vuex.esm.js?2f62:438 [vuex] unknown action type: fetchIndexArticles
vuex.esm.js?2f62:950 [vuex] unknown getter: articles
store/index.js
export default new Vuex.Store({
modules: {
articles,
}
});
store/modules/articles.js
const state = {
articles: [],
};
const getters = {
articles(state) {
return state.articles;
},
};
const mutations = {
[SET_ARTICLES] (state, pArticles) {
state.article = pArticles
state.errors = {}
}
}
const actions = {
[FETCH_INDEX_ARTICLES] (context) {
context.commit(FETCH_START)
return ApiService
.get('/articlelist/index/')
.then((data) => {
context.commit(SET_ARTICLES, data.articles);
context.commit(FETCH_END)
})
.catch((response) => {
context.commit(SET_ERROR, response.data.errors);
})
}
};
export default {
namespaced: true,
state,
getters,
actions,
mutations
}
How can I correctly import vuex module?
Thanks
You must specify your modules,
Your way is valid when you import your modules directly into your component
...mapGetters('articles', {
article: 'articles',
})
this.article(2)
https://vuex.vuejs.org/guide/modules.html#binding-helpers-with-namespace
To facilitate the use I use the method dispatch for actions
this.$store.dispatch('articles/FETCH_INDEX_ARTICLES', {anydata})
Having a problem with unknown action type.
store.js:
import Vue from 'vue'
import Vuex from 'vuex'
import { state } from './store/state'
import { mutations } from './store/mutations'
import { actions } from './store/actions'
import { getters } from './store/getters'
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex)
export default new Vuex.Store({
actions,
mutations,
getters,
state,
plugins: [createPersistedState()]
})
actions.js
import { ServerAPI } from '../plugins/server-api'
import { Mutations } from './mutations'
export const Actions = {
checkAuth: 'checkAuth',
loadCustomers: 'loadCustomers'
}
export const actions = {
[Actions.checkAuth] (context, payload) {
},
[Actions.loadCustomers] ({ commit }) {
// context.state
let customers = {}
ServerAPI.getCustomers().then((response) => {
if (response.status === 200) {
response.data.forEach((customer) => {
customers[customer.id] = customer
})
commit(Mutations.assignBulkCustomers, customers)
}
}).catch((error) => {
console.log(error)
})
return Promise.resolve(customers)
}
}
App.vue
methods: {
...mapActions([
Actions.loadCustomers,
Actions.checkAuth
]),
and invoking it
this.loadCustomers()
I somehow have this error. [vuex] unknown action type: loadCustomers
When I look into the debug information, I can see that the actions are not loaded, but the getters and mutations are.
I am trying to restructure my project using Vuex Modules.
If everything was running fine previously, I am now getting an error in my App.vue component, related to __mapGetters w module
vuex.esm.js?358c:97 Uncaught Error: [vuex] getters should be function but "getters.isAuthenticated" in module "login" is false.
The nav links are using : v-if="isAuthenticated" which is a getter in the Login module
#/App.vue
<template>
<div id="app">
<header id="header">
<nav>
<ul class="navigation">
<li id="home"><router-link :to="{ name: 'home' }">Home</router-link></li>
<li id="login" v-if="!isAuthenticated"><router-link :to="{ name: 'login' }">Login</router-link></li>
....
</template>
<script>
import store from '#/vuex/store'
import router from '#/router/index'
import { mapGetters } from 'vuex'
export default {
name: 'app',
computed: {
...mapGetters({ isAuthenticated: 'isAuthenticated' })
},
methods: {
logout () {
return this.$store.dispatch('logout')
.then(() => {
window.localStorage.removeItem('vue-authenticate.vueauth_token')
this.$router.push({ name: 'home' })
})
}
},
store,
router
}
</script>
my vuex project structure is now :
src
|_ vuex
L_ modules
L_ login
| |_ index.js
| |_ mutation_types.js
|_ shoppinglist
L_ index.js
|_ mutation_types.js
|_ App.vue
|_ main.js
#/vuex/store
import Vue from 'vue'
import Vuex from 'vuex'
import login from '#/vuex/modules/login'
import shoppinglist from '#/vuex/modules/shoppinglist'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
login,
shoppinglist
}
})
#vuex/modules/login/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import * as types from './mutation_types'
import vueAuthInstance from '#/services/auth.js'
Vue.use(Vuex)
const state = {
isAuthenticated: vueAuthInstance.isAuthenticated(),
currentUserId: ''
}
const actions = {
login: ({ commit }, payload) => {
payload = payload || {}
return vueAuthInstance.login(payload.user, payload.requestOptions)
.then((response) => {
// check response user or empty
if (JSON.stringify(response.data) !== '{}') {
commit(types.IS_AUTHENTICATED, { isAuthenticated: true })
commit(types.CURRENT_USER_ID, { currentUserId: response.data.id })
return true
} else {
commit(types.IS_AUTHENTICATED, { isAuthenticated: false })
commit(types.CURRENT_USER_ID, { currentUserId: '' })
return false
}
})
},
logout: ({commit}) => {
commit(types.IS_AUTHENTICATED, { isAuthenticated: false })
commit(types.CURRENT_USER_ID, { currentUserId: '' })
return true
}}
const getters = {
isAuthenticated: (state) => {
return state.isAuthenticated
}
}
const mutations = {
[types.IS_AUTHENTICATED] (state, payload) {
state.isAuthenticated = payload.isAuthenticated
},
[types.CURRENT_USER_ID] (state, payload) {
state.currentUserId = payload.currentUserId
}
}
export default new Vuex.Store({
state,
mutations,
getters,
actions
})
#/vuex/login/mutation_types
export const IS_AUTHENTICATED = 'IS_AUTHENTICATED'
export const CURRENT_USER_ID = 'CURRENT_USER_ID'
You have already created a store .
In your login module you just need to export the object no need to create a new store and export it
so in your login module change the export statement to just export a plain object
export default {
state,
mutations,
getters,
actions
}
...mapGetters('login', ['isAuthenticated']})
you should also specify the module