Why do I get error 「Error: [vuex] do not mutate vuex store state outside mutation handlers.」
・Error procedure
1.Input form data
2.Click submit(dispatch "setFormData")
3.Input form data
4.error
When input form data，I set data into tmpFormData.
tmpFormData is not vuex state.
It is components data.
Maybe，when exec 「this.$store.dispatch('ranks/setFormData', this.tmpFormData)」
Is tmpFormData and formData connected?
pages/search.vue
<template>
<v-container>
<v-form ref="form" v-on:submit.prevent="search">
<v-list width=100%>
<v-list-item v-for="(criteria, name, i) in searchCriterias" :key="i">
<v-subheader>{{criteria.name}}</v-subheader>
<template v-if="criteria.type=='checkbox'">
<v-checkbox
v-for="(item, j) in criteria.items" :key="j"
v-model="tmpFormData[name]"
:label="item"
:value="j + 1"
></v-checkbox>
</template>
</v-list-item>
</v-list>
<v-btn color="success" class="mr-4" type="submit">Search</v-btn>
</v-form>
</v-container>
</template>
<script>
export default {
data () {
return {
tmpFormData: {
search_1: null,
search_2: null,
search_3: null,
search_4: null,
},
searchCriterias: {
search_1: {
name: "sex",
items: ["male", "female"],
},
search_2: {
name: "price",
items: [
{label: "not selected", value: 0},
{label: "under 8000yen", value: 1}
],
},
},
}
},
methods: {
async search() {
await this.$store.dispatch('ranks/setFormData', this.tmpFormData)
}
}
}
</script>
store/search.js
export const state = () => ({
formData: [],
})
export const mutations = {
setFormData(state, formData) {
state.formData = formData
},
}
export const actions = {
async setFormData({ commit, getters }, formData) {
commit('setFormData', formData)
},
}
export const getters = {
formData (state) {
return state.formData
},
}
The error disappeared when I fixed it as follows, but I don't know why
setFormData(state, formData) {
state.formData.search_1 = formData.search_1
state.formData.search_2 = formData.search_2
state.formData.search_3 = formData.search_3
state.formData.search_4 = formData.search_4
},
I guess you have set strict: true on vuex.
In this mode, vuex warns you, when you manipulate any state without using a mutation. With this statement v-model="tmpFormData[name]" you do exactly that.
You can either disable strict mode or use something like vuex-map-fields
Related
Im trying to use vuex to make things easier, overall it's fine, but Im stuck when using a getter with param from an other getter.
main code :
<template>
<v-container>
<v-card v-for="(order,i) in getOrders" :key="i" class="cart-cards text-left">
<v-card-title>
{{getMealById(order.meal_id).name}}
</v-card-title>
<v-btn v-on:click="addQuantity(order)">
+
</v-btn>
<h1>
{{order.quantity}}
</h1>
<v-btn #click="reduceQuantity(order)">
-
</v-btn>
</v-card>
</v-container>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
data: () => ({
}),
created() {
this.fetchOrders();
},
mounted() {
},
methods: {
...mapActions(["fetchOrders"]),
addQuantity(order) {
order.quantity += 1;
this.updateOrders(order);
},
reduceQuantity(order) {
if (order.quantity > 0) {
order.quantity -= 1;
this.updateOrders(order);
}
},
},
computed: {
...mapGetters(["getOrders", "getMealById"]),
},
};
order.js :
import axios from 'axios'
import url from '../../config.js'
const state = {
all_orders: [],
}
const getters = {
getOrders : (state)=>state.all_orders,
}
const actions = {
async fetchOrders({commit}) {
const response = await axios.get("http://" + url + "/orders")
commit('setOrders',response.data)
},
async updateOrders({commit},payload) {
const response = await axios.put("http://" + url + "/orders/"+payload.id,payload)
commit('setOrders',response.data)
},
}
const mutations = {
setOrders: (state,orders)=>{
state.all_orders = orders
},
}
export default {
state,
getters,
actions,
mutations
}
meal.js
import axios from 'axios'
import url from '../../config.js'
const state = {
all_meals: [],
}
const getters = {
getMeals: (state) => state.all_meals,
getMealById: (state) => (id) => {
return state.all_meals.find(todo => todo.id === id)
}
}
const actions = {
async fetchMeals({ commit }) {
const response = await axios.get("http://" + url + "/meals")
commit('setMeals', response.data)
},
}
const mutations = {
setMeals: (state, meals) => {
state.all_meals = meals
},
}
export default {
state,
getters,
actions,
mutations
}
So when iam accessing the vue from a link, no error, but when I load the url by itself, an error occur and the getMealById dont trigger
overall Is their a good practice for "waiting" for response on state/actions call ?
Thanks in advance !!!
In component, you can check if getMeals returns a non-empty array, then render the v-for loop:
<template>
<v-container v-if="getMeals().length > 0">
<v-card v-for="(order,i) in getOrders" :key="i" class="cart-cards text-left">
<v-card-title>
{{getMealById(order.meal_id).name}}
</v-card-title>
</v-card>
</v-container>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
data: () => ({
}),
created() {
this.fetchOrders();
},
mounted() {
},
methods: {
...mapActions(["fetchOrders"]),
},
computed: {
...mapGetters(["getMeals", "getOrders", "getMealById"]),
},
};
I want a selector in a Vue component to update when the stored value in Vuex is updated. Here is a simplified version of the vue component:
<template>
<v-autocomplete
outlined
dense
v-model="team"
label="Select Team"
:items="teams"
item-text="name"
item-value="_id"
return-object
class="mx-3 mt-3"
#change="selectTeam"
></v-autocomplete>
</template>
The JS:
<script>
export default {
name: 'NavDrawer',
data() {
return {
team: null,
teams: [],
};
},
async created() {
this.team = this.$store.getters['teams/allTeams'].find(
(t) => t.name === this.$route.params.team,
);
this.teams = this.$store.getters['teams/allTeams'];
},
methods: {
async selectTeam() {
if (this.team) {
await this.$store.dispatch('editTeam/selectTeam', this.team);
this.$router.push(`/team/${this.team.name}`);
} else {
this.$router.push('/');
}
},
},
};
</script>
And the Vuex store:
export default {
namespaced: true,
state: () => ({
editedTeam: {},
}),
mutations: {
selectTeam(state, team) {
state.editedTeam = team;
},
resetTeam(state) {
state.editedTeam = {};
},
},
actions: {
selectTeam({ commit }, team) {
commit('selectTeam', team);
},
resetTeam({ commit }) {
commit('resetTeam');
},
},
getters: {
getSelectedTeam: (state) => state.editedTeam,
},
};
I'm not sure if it matters, but this vuex store is passed into an index file to create the Vuex.Store -- this is working correctly and is not the issue.
I want the team stored in editedTeam to reactively update the team selected in the v-autocomplete component, when a new editedTeam is selected elsewhere in the application. I want the v-autocomplete selector to send a new team to editedTeam when it is selected. I think I should be using mapState for this and storing them as a computed value -- but nothing I've tried has worked. I find the vuex documentation to be lacking in good examples.
Thanks!
I have a snackbar from Vuetify. It's in default.vue and the vuex store controls the v-model, message and color:
DefaultSnackBar.vue
<template>
<v-container>
<v-snackbar
v-model="snackbarProperties.show"
:color="snackbarProperties.color"
timeout="7000"
multi-line
>
{{ snackbarProperties.message }}
<template v-slot:action="{ attrs }">
<v-btn
text
v-bind="attrs"
#click="hideSnackbar"
>
Close
</v-btn>
</template>
</v-snackbar>
</v-container>
</template>
<script>
import { mapActions } from "vuex";
import { mapGetters } from "vuex";
export default {
methods :{
...mapActions("Snackbar",["showSnackbar","hideSnackbar"]),
},
computed: {
...mapGetters("Snackbar",["snackbarProperties"])
},
}
</script>
Snackbar.js
export const state = () => ({
message: "",
color: "",
show: false,
});
export const getters = {
snackbarProperties: state => {
return state;
},
}
export const mutations = {
showSnackbar: (state, payload) => {
state.message = payload.message;
state.color = payload.color;
state.show = true;
},
hideSnackbar: (state) => {
state.message = "";
state.color = ""
state.show = false;
},
}
export const actions = {
showSnackbar({ commit }, payload) {
commit('showSnackbar', payload)
},
hideSnackbar({ commit }) {
commit('hideSnackbar')
}
}
When I call showSnackbar({...}) the bar appears correctly with no errors, but when it disappears (timeout is reached) is get this error and everything crashes
do not mutate vuex store state outside mutation handlers
I think it's because when the bar disappears the component changes the value of the v-model it's attached to but I'm not sure how to work around this.
I found the answer from this vue forum:
Use an action with the setTimeout code in it. Then in the timeout
commit the mutation. Mutations should be synchronous which is why
using a timeout in them is throwing a warning.
I've updated Snackbar.js to suit:
export const state = () => ({
message: "",
color: "",
show: false,
});
export const getters = {
snackbarProperties: state => {
return state;
},
}
export const mutations = {
showSnackbar: (state, payload) => {
state.message = payload.message;
state.color = payload.color;
state.show = true;
},
hideSnackbar: (state) => {
state.message = "";
state.color = ""
state.show = false;
},
}
export const actions = {
showSnackbar({ commit }, payload) {
commit('showSnackbar', payload)
setTimeout(() => {
commit('hideSnackbar')
}, 500);
},
hideSnackbar({ commit }) {
commit('hideSnackbar')
}
}
try this if you need showing multiple
<template>
<div class="text-center">
<v-snackbar
v-for="(snackbar, index) in snackbars.snackbars.filter(
(s) => s.isVisible
)"
:key="snackbar.text + Math.random()"
v-model="snackbar.isVisible"
:color="snackbar.color"
:timeout="-1"
:right="true"
:top="true"
:style="`top: ${index * 60}px`"
>
<v-row no-gutters>
<v-col md="11" sm="11">
{{ snackbar.text }}
</v-col>
<v-col md="1" sm="1">
<v-btn class="mx-2" icon small #click="hideNotify(index)">
<v-icon color="error"> mdi-close </v-icon>
</v-btn>
</v-col>
</v-row>
</v-snackbar>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
computed: {
...mapState({ snackbars: 'notification' }),
},
methods: {
hideNotify(index) {
this.$store.dispatch('notification/HIDE_NOTIFY_WITH_INDEX',index)
},
},
}
</script>
add this into the vuex as notification.js
export const state = () => ({
snackbars: [],
})
export const mutations = {
SET_SNACKBAR(state, snackbar) {
state.snackbars = state.snackbars.concat(snackbar)
},
HIDE_NOTIFY_WITH_INDEX(state,index) {
if (index in state.snackbars) {
state.snackbars.splice(index, 1)
}
},
HIDE_NOTIFY(state) {
state.snackbars = []
},
}
export const actions = {
SET_SNACKBAR({ commit }, snackbar) {
snackbar.isVisible = true
snackbar.color = snackbar.color || 'dark'
commit('SET_SNACKBAR', snackbar)
setTimeout(() => {
commit('HIDE_NOTIFY')
}, 6000)
},
HIDE_NOTIFY_WITH_INDEX({ commit },index) {
commit('HIDE_NOTIFY_WITH_INDEX',index)
},
}
I have a problem about how to dispatch action in Vuex.
Now I'm making an app and using Vuex.
I want to dispatch vuex signin action in store/user.js from Login.vue,but it's not working.I want you to give me any tips.
Now it's the app's directory constructure.
enter image description here
And the files which can contain problems are here:
index.js
import Vue from 'vue';
import Vuex from 'vuex';
import user from './modules/user'
Vue.use(Vuex);
const store = new Vuex.Store({
modules: {
user
}
})
export default store;
user.js
import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios'
Vue.use(Vuex);
const user = new Vuex.Store({
state: {
current: null,
name: 'John'
},
mutations: {
setCurrent(state, payload) {
state.current = payload
}
},
actions: {
signin({commit}, {name, password}) {
axios.$post('http://localhost:3000/login', {name, password})
.then((response) => {
commit('setCurrent', response.data)
})
},
signout({commit}) {
commit('setCurrent', null)
}
}
})
export default user;
Login.vue
<template>
<v-container>
<v-card>
<v-card-title>
Login
</v-card-title>
<v-card-text>
<v-form>
<v-text-field
v-model="name"
:counter="10"
label="name"
required
></v-text-field>
<v-text-field
v-model="password"
:counter="10"
label="password"
required
></v-text-field>
<v-btn
class="mr-4"
#click="submitLoginDatas()"
>
Login
</v-btn>
</v-form>
</v-card-text>
</v-card>
{{ getName }}
<v-row class="button">
<v-col>
<v-btn
style="margin-top: 4px;"
to="/signup"
>
Signup
</v-btn>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
data() {
return {
name: '',
password: ''
}
},
methods: {
async submitLoginDatas() {
console.log('HI')
console.log(this.$store.state.user.name)
// ここまでは呼ばれてる
// store自体も登録できている(下のgetNameから確認できる)
await this.$store.dispatch("signin",
{
name: this.name,
password: this.password
}
)
}
},
computed: {
getName() {
return this.$store.state.user.name
}
}
}
</script>
What I checked by now
・typo...ex.express actions as action like this
・namespace...now I don't express namespaced:true in user.js, but I tried namespaced: true in user.js with the below code. But it didn't work.
this.$store.dispatch("user/signin", {
name: this.name,
password: this.password
})
・user.js is registered correctly in index.js or not
...getName() in computed in Login.vue is working, so maybe it's ok.
・whether actions and mutations are written as object, not function
...maybe it's correct.
Thank you for reading. My question is the reason why this error
[vuex] unknown action type: signin
has been occuring and how to fix it.
You are trying to use Vuex inside another Vuex - this is not going to work. Your Vuex module(s) should export a plain object instead of Vuex instance. Please change modules/user.js to be
import axios from 'axios'
export default {
state(): {
return {
current: null,
name: 'John'
}
},
mutations: {
setCurrent(state, payload) {
state.current = payload
}
},
actions: {
signin({commit}, {name, password}) {
axios.$post('http://localhost:3000/login', {name, password})
.then((response) => {
commit('setCurrent', response.data)
})
},
signout({commit}) {
commit('setCurrent', null)
}
}
}
Here is how CourseDescriptionPage.vue looks
import CourseCover from './CourseDescription/CourseCover.vue'
import WhyJoin from './CourseDescription/WhyJoin.vue'
import CourseStructure from './CourseDescription/CourseStructure.vue'
export default {
props: ['id'],
data () {
return {
hasDetails: false
}
},
created () {
this.$store.dispatch('loadCourseDetails', this.id).then(() => {
this.hasDetails = true
})
},
computed: {
course () {
return this.$store.state.courseDetails[this.id]
}
},
components: {
CourseCover,
WhyJoin,
CourseStructure
},
name: 'CourseDescriptionPage'
}
<template>
<div v-if="hasDetails">
<course-cover :courseTitle="course.title" :courseDuration="course.duration"></course-cover>
<why-join :courseTitle="course.title" :courseJobs="course.jobs"></why-join>
<course-structure :lectureList="course.lectureList"></course-structure>
</div>
</template>
Here is how my store looks
import Vuex from 'vuex'
import * as firebase from 'firebase'
Vue.use(Vuex)
export const store = new Vuex.Store({
state: {
courseDetails: {},
loading: false
},
mutations: {
setCourseDetails (state, payload) {
const { id, data } = payload
state.courseDetails[id] = data
},
setLoading (state, payload) {
state.loading = payload
}
},
actions: {
loadCourseDetails ({commit}, payload) {
commit('setLoading', true)
firebase.database().ref(`/courseStructure/${payload}`).once('value')
.then((data) => {
commit('setCourseDetails', {
id: payload,
data: data.val()
})
commit('setLoading', false)
})
.catch(
(error) => {
console.log(error)
commit('setLoading', false)
}
)
}
}
Here is how my CourseCover.vue looks
export default {
props: {
courseTitle: {
type: String,
required: true
},
courseDuration: {
type: String,
required: true
}
},
name: 'CourseCover'
}
<template>
<v-jumbotron
src="./../../../static/img/course_cover_background.png">
<v-container fill-height>
<v-layout align-center>
<v-flex>
<h3>{{ courseTitle }}</h3>
<span>{{ courseDuration }}</span>
<v-divider class="my-3"></v-divider>
<v-btn large color="primary" class="mx-0" #click="">Enroll</v-btn>
</v-flex>
</v-layout>
</v-container>
</v-jumbotron>
</template>
I think there is something wrong with the way I am using props here but I couldn't figure out.
The data is loaded in store by the firebase that I know for sure because it shows in Vue dev tools but I just couldn't understand why Vue is complaining about that.
Thanks in advance.
course is undefined on component initialize ,so then you should return an empty object:
computed: {
course () {
return this.$store.state.courseDetails[this.id] || {}
}
},