CODEWITHSUNDEEP
vue.js
Quantum
Quantum

Reputation: 288

VueJS - Error: [vuex] do not mutate vuex store state outside mutation handlers

I am trying to toggle between Dark and Light themes, and i am doing it using the feather icons, I am able to change the theme, but i get an error in the console window. Below shows my code and the error.

Here is my Code:

  <div class="con-img ml-3">
              <feather-icon v-if="this.$store.state.theme=== 'light'" icon="Icon" v-model="OnChange"  vs-name="theme-mode-light"/>
            </div>
            <div class="con-img ml-3">
              <feather-icon v-if="this.$store.state.theme=== 'dark'" icon="Icon" v-model="OnChange" vs-value="dark" vs-name="theme-mode-light"/>
            </div>
    ...
    watch: {
        layoutType (val) {
          if (val === 'horizontal') {
            if (this.theme === 'semi-dark') this.theme = 'light'
            if (this.navbarType === 'hidden')   this.navbarTypeLocal = 'floating'
            this.$emit('updateNavbarColor', '#fff')
          }
        }
      },
    computed: {
         theme: {
          get ()    { return this.$store.state.theme },
          set (val) { this.$store.dispatch('updateTheme', val) }
        },
    }
    methods: {
          OnChange(theme) {
          this.$store.state.theme = theme
        }
     }

actions.js

 updateTheme ({ commit }, val) {
    commit('UPDATE_THEME', val)
  },

mutation.js

 UPDATE_THEME (state, val)           { state.theme             = val   },

Here is the error that i get:

enter image description here

Can someone please tell me why i am getting this error even though i am able to toggle between themes and also please tell me how to get rid of this error.

Upvotes: 0

Views: 388

Answers (1)

Amaarockz
Amaarockz

Reputation: 4674

This is because you are trying to update a vuex state directly without using mutation. If you check the method onChange, you are trying to assign the value directly to the vuex state. The orthodox way would be updating it using a mutation

you can modify your method to be

  methods: {
          OnChange(theme) {
          this.$store.dispatch('updateTheme', theme);
        }
     }

Upvotes: 1

Related Questions