I am trying to add the Actions I created in my Vuex module to the Methods of my component.
My component "HomePage.vue" looks like this
import { PlusIcon } from "vue-feather-icons";
import TaskItem from "../TaskItem";
import moment from "moment";
import { mapGetters, mapActions } from "vuex";
export default {
name: "home-page",
components: {
PlusIcon,
TaskItem,
},
methods: {
...mapActions(['fetchTasks'])
},
computed: mapGetters(['allTasks']),
created() {
setInterval(() => {
document.getElementById("time").innerHTML = moment().format("h:mm:ss a");
}, 1000);
},
};
My Vuex module "tasks.js" looks like this
import fs from 'fs'
const state = {
tasks: []
}
const getters = {
allTasks: (state) => state.tasks
}
const actions = {
fetchTasks({commit}) {
let rawdata = fs.readFileSync('../backend/tasks.json')
console.log(JSON.parse(rawdata))
commit('setTasks', JSON.parse(rawdata))
}
}
const mutations = {
setTasks: (state, passedTasks) => (state.tasks.push(passedTasks))
}
export default {
state,
getters,
actions,
mutations,
}
When attempting to use this.fetchTasks() in created(), nothing happens.
When console logging this.fetchTasks() it returns as undefined
Considering your tasks is a module of your vuex store, you should call your mapActions, mapGetters this way :
methods: {
...mapActions('tasks', ['fetchTasks'])
},
computed: {
...mapGetters('tasks', ['allTasks'])
},
Related
I'm having a problem which is it gives me an error " [vuex] unknown action type: addUserAction " when I dispatch Action :-
here's my module called " HomePage "
import axios from 'axios'
export default {
state : () => ({
categories : [],
users : []
}),
mutations :{
GET_CATEGORIES( state ,categories){
state.categories = categories
},
ADD_USER(state , user){
state.users.push(user)
}
},
actions :{
getEcommCategories({commit}){
return axios.get("/api/ecommerceCategories").then(res =>{
commit('GET_CATEGORIES' , res.data.data) ;
})
},
addUserAction({commit},user){
return commit('ADD_USER' , user)
}
}
}
and this is my store :-
import Vue from "vue";
import Vuex from "vuex"
import * as HomePage from "./HomePage/home"
Vue.use(Vuex)
export default new Vuex.Store({
modules :{
HomePage
},
state,
getters,
actions,
mutations,
})
so I try to dispatch action in methods like this
add(){
this.$store.dispatch('addUserAction', this.user)
},
I think changing import * as HomePage from "./HomePage/home" to import HomePage from "./HomePage/home" in your store file might work.
Hope this helps.
add namespaced: true to your module like this:
module:
export default {
namespaced: true,
state,
getters,
actions,
mutations,
};
root:
import customNamespace from ./customNamespace.js
modules: {
customNamespace
}
component:
this.$store.dispatch('customNamespace/action', payload)
I personally like to define everything in constants:
const NAMESPACE = 'selectOption';
const GET_SELECT_OPTIONS = 'selectOptions';
const INITIALIZE_SELECT_OPTIONS = 'initializeSelectOptions';
export const GETTER_SELECT_OPTIONS = `${NAMESPACE}/${GET_SELECT_OPTIONS}`;
export const ACTION_INITIALIZE_SELECT_OPTIONS = `${NAMESPACE}/${INITIALIZE_SELECT_OPTIONS}`;
const state = {
selectOptions: [],
};
const getters = {
[GET_SELECT_OPTIONS]: (state) => state.selectOptions,
}
const actions = {
async [INITIALIZE_SELECT_OPTIONS](context, payload) {
...
}
}
const mutations = {
...
}
export default {
namespaced: true,
state,
getters,
actions,
mutations,
};
and then in my component i can use the action like this:
this.$store.dispatch(ACTION_INITIALIZE_SELECT_OPTIONS, payload)
or use mapActions by vuex:
methods: {
...mapActions({ initializeSelectOptions, ACTION_INITIALIZE_SELECT_OPTIONS}),
async myMethod(){
await this.initializeSelectOptions(this.payload)
}
}
Hello developers I'm working with Ionic and Vue+Vuex in this app, but eventually, I can't access my state from my getters for some reason.
As usually the management state is settled for that purpose with actions getters, mutations, and state.
import { createStore } from "vuex";
const urlLogin = "http://localhost:3006/auth";
const urlUser = "http://localhost:3006/user";
const store = createStore({
state() {
return {
userRegisteredState: false,
allUsersState: [],
};
},
mutations: {
commit_get_all_users(state, payload) {
console.log(payload);
return (state.allUsersState = payload);
},
},
getters: {
getterGetAllUsers(state) {
console.log(state);//checking all state (See image )
console.log(state.allUsersState)//checking only the item I want to consume from state (See image )
return state.allUsersState;
},
},
actions: {
//=================================================================
//============================================================
async getAllUsers({ commit }) {
fetch(`${urlUser}/get/all/users`, {
method: "GET",
headers: {
"Content-Type": "application/json",
"Access-Control-Allow-Origin": "http://localhost:8100",
},
})
.then((result) => {
return result.json();
})
.then((result) => {
console.log(result);
commit("commit_get_all_users", result);
})
.catch((error) => {
console.log(error);
error;
});
},
},
});
export default store;
then on my component , in this case that one referring to get all users I set this logic:
<template>
...some tags...
</template>
<script>
import { mapActions, mapGetters } from "vuex";
export default {
name: "AllUsersComponent",
data() {
return {
allUsers: [],
};
},
methods: {
...mapActions(["getAllUsers"]),
getAllUsersFront() {
this.$store.dispatch("getAllUsers");
},
...some methods....
},
computed: {
...mapGetters(["getterGetAllUsers"]),
getterGetAllUsersFunction() {
console.log(this.$store.getters.getterGetAllUsers);
return this.$store.getters.getterGetAllUsers;
},
},
async mounted() {
this.getAllUsersFront();
},
created() {
this.getAllUsersFront();
this.getterGetAllUsersFunction;
console.log(this.getterGetAllUsersFunction);
},
watch: {},
};
</script>
<style>
</style>
On my main.js file store is imported according to IONC in this way
import { createApp } from "vue";
import './gapi.js'
import App from "./App.vue";
import router from "./router";
import store from "./store/index"; //importando vuex
import loginComponentTag from "./components/Login";
import allUsersComponentTag from "./components/all-users-component"
// import GoogleSignInButton from 'vue-google-signin-button-directive'
import { IonicVue } from "#ionic/vue";
/* Core CSS required for Ionic components to work properly */
import "#ionic/vue/css/core.css";
/* Basic CSS for apps built with Ionic */
import "#ionic/vue/css/normalize.css";
import "#ionic/vue/css/structure.css";
import "#ionic/vue/css/typography.css";
/* Optional CSS utils that can be commented out */
import "#ionic/vue/css/padding.css";
import "#ionic/vue/css/float-elements.css";
import "#ionic/vue/css/text-alignment.css";
import "#ionic/vue/css/text-transformation.css";
import "#ionic/vue/css/flex-utils.css";
import "#ionic/vue/css/display.css";
/* Theme variables */
import "./theme/variables.css";
const app = createApp(App)
.use(IonicVue)
.use(store)
.use(router)
app.component("LoginComponent", loginComponentTag);
app.component("AllUsersComponent",allUsersComponentTag)
router.isReady().then(() => {
app.mount("#app");
});
And my vue.config.js is settled in this way:
module.exports = {
devServer: {
proxy: "http://localhost:8100",
},
};
I checked my logs and eventually.
Literally, the situation is that despite having my state populated with data, unless I retrieve the whole state, I can't retrieve a particular item from it, cause the response is nothing.
Is there any configuration I'm omitting in this process I need to have in mind?
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'm new to Vuejs and still figuring out how to get the latest updated data.
app.js - preload the data after calling 'global/checkUserSignedIn'
import Vue from 'vue'
import axios from 'axios'
import router from './router'
import store from './store'
import { sync } from 'vuex-router-sync'
import App from 'components/app-root'
import { mapGetters, mapActions } from 'vuex'
Vue.prototype.$http = axios
sync(store, router)
const app = new Vue({
store,
router,
...App,
created() {
this.preload()
},
methods: {
preload: function () {
this.$store.dispatch('global/checkUserSignedIn')
}
}
})
export { app, router, store }
global.js (a vuex store)
/// actions, mutations here
const actions = {
checkUserSignedIn({ commit, state }) {
commonApi.isUserSignedIn().then(function (data) {
state.usersignedin = data
})
},
}
const getters = {
isUserSignedIn: state=>state.usersignedin
}
export default {
state,
getters,
actions,
mutations,
namespaced: true
}
On a component, I call:
export default {
computed: {
...mapGetters('global', ['isUserSignedIn']),
},
watch: {
isUserSignedIn: function (newVal, oldVal) {
if (newVal !== undefined) {
console.log('ok, correct result')
}
}
},
updated() {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been re-rendered
console.log('updated: ' + this.isUserSignedIn)
})
},
created() {
console.log('created :' this.isUserSignedIn)
}
}
}
On both Updated and Created, I don't get the last updated data isUserSignedIn which is True if a user has been logged in though if I put {{isUserSignedIn }} on a template, it shows correctly.
Is there any way to get it to work other than having to use a Watcher here.
Updated: Maybe using Watcher is the only way to get the lastest updated data.