I have a Vuex store like this. When triggering the storeTest action from my component with this.$store.dispatch("storeTest"); I need to use this weird syntax store.store to access an item.
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
loading: false,
fileStr: "data.json",
},
actions: {
storeTest(state) {
//works
console.log("state: ", state.state.fileStr);
//fail
console.log("state: ", state.fileStr);
},
},
},
});
I would expect I can access a state with state.item. Instead I have to write state.state.item. What could be wrong?
It's because actions do not receive state as a parameter, but context. You need it to dispatch other actions or to commit.
actions: {
async myAction ({ state, dispatch, commit }) {
console.log(state.loading);
await dispatch('anotherAction')
commit('someCommit')
}
}
Full list of the context properties here.
The first argument to an action function is not state, rather context (see docs).
This "context" object has various properties, one of which is state.
This differs from a mutation where the first argument is state.
refined and working thanks to #FitzFish
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
loading: false,
fileStr: "data.json",
},
actions: {
storeTest(context) {
//works
console.log("state: ", context.state.fileStr);
},
},
});
Related
how to use v-model on vuex,
in this case only to show modal box when button is clicked
in this vuex also have separate to module
this is index module
import createPersistedState from 'vuex-persistedstate'
import Vue from 'vue'
import Vuex from 'vuex'
import authentication from './authentication'
import products from './products'
import projects from './projects'
Vue.use(Vuex)
export default new Vuex.Store({
strict: true,
state: {
baseUrl: '/api',
// baseUrl: 'http://localhost:3333/api',
},
mutations: {
},
actions: {
},
modules: {
authentication,
products,
projects,
},
plugins: [
createPersistedState(),
],
})
and this is my module
import HTTP from '../http';
export default {
namespaced: true,
state:{
dialog: false,
},
getters: {
dialog(state){
console.log(state.dialog)
return state.dialog
}
},
mutations: {
closeCard(state){
state.dialog=false;
console.log(state.dialog);
}
}
}
i have try map state and map getter both not function
and this is my vue code
v-model="dialog"
width="500"
i have try use map state or map getter but both not working
import Test from '/components/Test'
export default {
components:{
Test
},
computed: {
dialog:{
get() {
return this.$store.state.dialog.products
},
},
map State('products',[
'dialog'
]),
},
methods:{
map Actions('products',[
'close Card',
])
}
}
and this is my error
Computed property "dialog" was assigned to but it has no setter.
found in
Directly binding a computed property to a v-model is a bad practice as a computed value doesn't have a default setter.
you will need to implement a setter for your computed value. you can read about it here.
you should implement a state action that changes the value of the dialog property and then call it in your setter (and set it to true or false, depending on the case.
Actually there are typo's in your code while called vuex handlers
import {mapState, mapActions } from 'vuex'; // check this line
import Test from '/components/Test'
export default {
components:{
Test
},
computed: {
dialog:{
return this.dialog;
},
...mapState('products',[ // check this line
'dialog'
]),
},
methods:{
...mapActions('products',[ // check this line
'closeCard', // check this line
])
}
}
Also note that you shouldn't directly bind a computed property to a v-model
I'm trying to have a state that consists of namespaced modules and a global state. Unfortunately, I can access the global actions but I can't get the global state properties.
If I try to use mapState in a component like this,
computed: {
...mapState(['editMode']),
...mapState('address', ['addresses']),
}
I have access to addresses, but editMode is always undefined. Mapping actions works flawlessly and updates the state according to the Vuex Chrome Tool.
But I noticed, that the global state is shown under its own "namespace" "global". So I tried to map using ...mapState('global', ['editMode']), but got an error that the namespace does not exist.
Here's my code:
index.ts
import Vue from 'vue';
import Vuex from 'vuex';
import address from './modules/address';
import global from './global';
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
address,
global,
},
});
modules/address.ts
export default {
namespaced: true,
state: {
addresses: [],
},
mutations: {
...
},
actions: {
...
},
};
global.ts
export default {
namespaced: false,
state: {
editMode: 0,
},
mutations: {
SET_EDIT_MODE(state, value) {
state.editMode = value;
},
},
actions: {
setEditMode({ commit }, editMode) {
commit('SET_EDIT_MODE', editMode);
},
},
};
State is not affected by namespace. In a way it always gets namespaced. This is so we don't have collision.
To access a state from a module you need to get a bit verbose:
computed: {
...mapState({
editMode: state => state.global.editMode
}),
...mapState('address', ['addresses']),
}
I'm using laravel, vue and vuex in another project with almost identical code and it's working great. I'm trying to adapt what I've done there to this project, using that code as boilerplate but I keep getting the error:
[vuex] unknown action type: panels/GET_PANEL
I have an index.js in the store directory which then imports namespaced store modules, to keep things tidy:
import Vue from "vue";
import Vuex from "vuex";
var axios = require("axios");
import users from "./users";
import subscriptions from "./subscriptions";
import blocks from "./blocks";
import panels from "./panels";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
},
actions: {
},
mutations: {
},
modules: {
users,
subscriptions,
blocks,
panels
}
})
panels.js:
const state = {
panel: []
}
const getters = {
}
const actions = {
GET_PANEL : async ({ state, commit }, panel_id) => {
let { data } = await axios.get('/api/panel/'+panel_id)
commit('SET_PANEL', data)
}
}
const mutations = {
SET_PANEL (state, panel) {
state.panel = panel
}
}
export default {
namespaced: true,
state,
getters,
actions,
mutations
}
Below is the script section from my vue component:
<script>
import { mapState, mapActions } from "vuex";
export default {
data () {
return {
}
},
mounted() {
this.$store.dispatch('panels/GET_PANEL', 6)
},
computed:
mapState({
panel: state => state.panels.panel
}),
methods: {
...mapActions([
"panels/GET_PANEL"
])
}
}
</script>
And here is the relevant code from my app.js:
import Vue from 'vue';
import Vuex from 'vuex'
import store from './store';
Vue.use(Vuex)
const app = new Vue({
store: store,
}).$mount('#bsrwrap')
UPDATE:: I've tried to just log the initial state from vuex and I get: Error in mounted hook: "ReferenceError: panel is not defined. I tried creating another, very basic components using another module store, no luck there either. I checked my vuex version, 3.1.0, the latest. Seems to be something in the app.js or store, since the problem persists across multiple modules.
Once you have namespaced module use the following mapping:
...mapActions("panels", ["GET_PANEL"])
Where first argument is module's namespace and second is array of actions to map.
I'm following the sample code in the Vuex guide and I'm getting a weird result (at least for me).
Vuex Store
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
name: ""
},
mutations: {
updateName(state, newName) {
state.name = newName;
}
},
getters: {
getName: state => state.name
}
});
export default store;
Component, inside the <script> tags:
import { mapGetters } from "vuex";
export default {
name: "Home",
data: function() {
return {
showingName: true
};
},
computed: {
...mapGetters(["getName"])
},
methods: {
getNameHandler() {
// eslint-disable-next-line
console.log(this.$store.getters.getname); // returns undefined
}
}
};
Here is a live sample:
https://codesandbox.io/s/yww774xrmj
Basically the question is, why the console.log returns undedined?. you can see that by clicking the button in the Home component. I'm following the same pattern as shown in the official Vuex guide:
https://vuex.vuejs.org/guide/getters.html#property-style-access
Unless I'm missing an import or a Vue.use(), but what gets my attention is that using the ´mapGetters´ actually allows me to use the getter as a computed property. You can change the name property of the state with the button in the About component.
The getter name is case-sensitive.
this.$store.getters.getName
You have
this.$store.getters.getname
First of all install the chrome plugin for vuex link.
Please check your mutations -> updateName is updating the state or not then you will get you're value from getters -> getName.
I hope that gonna help you out.
Thanks.
I'm using Vue.js and Vuex.
I want to watch the value of store (I'll share my sample codes in the last of this post).
But I have encountered the error "Error: [vuex] store.watch only accepts a function."
In this Web site, I found how to use "single" store.
https://codepen.io/CodinCat/pen/PpNvYr
However, in my case, I want to use "two" stores.
Do you have any idea to solve this problem.
●index.js
'use strict';
import Vue from 'vue';
import Vuex from 'vuex';
import {test1Store} from './modules/test1.js';
import {test2Store} from './modules/test2.js';
Vue.use(Vuex);
export const store = new Vuex.Store({
modules: {
test1: test1Store,
test2: tes21Store,
}
});
●test1.js
'use strict';
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export const checkerStore = {
namespaced: true,
state: {
count: 1
},
getters: {
getCount(state){
return state.count;
}
}
};
export default {test1};
●test.vue
<template>
{{ $store.state.couunt }}
</template>
<script>
import {store} from './store/index.js';
export default {
data: function () {
return {
}
},
store: store,
methods: {
},
mounted() {
setInterval(() => { this.$store.state.count++ }, 1000);
this.$store.watch(this.$store.getters['test1/getCount'], n => {
console.log('watched: ', n)
})
}
}
}
</script>
You're getting that error because in your example code, the first argument you've passed to watch is, as the error suggests, not a function.
The argument is actually implemented using the native JavaScript call Object.defineProperty underneath the hood by Vue, so the result of doing store.getters['test1/getCount'] as you have, is actually a number.
I don't think it's recommended to use watch in a scenario like yours, but if you insist, you can access count by providing an alternate argument form, something like:
this.$store.watch((state, getters) => getters['test1/getCount'], n => { ... })