vue js 2 how to watch store values from vuex

Question

I am using vuex and vuejs 2 together   I am new to vuex  I want to watch a store variable change   I want to add the watch function in my vue component  This is what I have so far   import Vue from  vue   import     MY STATE    from          mutation-types    export default      MY STATE  state  token        state my state   token            I want to know if there are any changes in the my state  How do I watch store my state in my vuejs component

User · Answer

You can use a combination of Vuex actions, getters, computed properties and watchers to listen to changes on a Vuex state value.

HTML Code:

<div id="app" :style='style'>
  <input v-model='computedColor' type="text" placeholder='Background Color'>
</div>

JavaScript Code:

'use strict'

Vue.use(Vuex)

const { mapGetters, mapActions, Store } = Vuex

new Vue({
    el: '#app',
  store: new Store({
    state: {
      color: 'red'
    },
    getters: {
      color({color}) {
        return color
      }
    },
    mutations: {
      setColor(state, payload) {
        state.color = payload
      }
    },
    actions: {
      setColor({commit}, payload) {
        commit('setColor', payload)
      }
    }
  }),
  methods: {
    ...mapGetters([
        'color'
    ]),
    ...mapActions([
        'setColor'
    ])
  },
  computed: {
    computedColor: {
        set(value) {
        this.setColor(value)
      },
      get() {
        return this.color()
      }
    },
    style() {
        return `background-color: ${this.computedColor};`
    }
  },
  watch: {
    computedColor() {
        console.log(`Watcher in use @${new Date().getTime()}`)
    }
  }
})

See JSFiddle demo.

User · Answer

x000D   x000D         store       x000D  import Vue from  vue  x000D  import Vuex from  vuex  x000D  import axios from  axios  x000D   x000D  Vue use Vuex  x000D   x000D  export default new Vuex Store   x000D    state    x000D      showRegisterLoginPage  true  x000D      user  null  x000D      allitem  null  x000D      productShow  null  x000D      userCart  null x000D       x000D    mutations    x000D      SET USERS state  payload    x000D        state user   payload x000D         x000D      HIDE LOGIN state    x000D        state showRegisterLoginPage   false x000D         x000D      SHOW LOGIN state    x000D        state showRegisterLoginPage   true x000D         x000D      SET ALLITEM state  payload    x000D        state allitem   payload x000D         x000D      SET PRODUCTSHOW state  payload    x000D        state productShow   payload x000D         x000D      SET USERCART state  payload    x000D        state userCart   payload x000D        x000D       x000D    actions    x000D      getUserLogin   commit      x000D        axios   x000D          method   get   x000D          url   http   localhost 3000 users   x000D          headers    x000D            token  localStorage getItem  token   x000D            x000D           x000D           then    data      gt    x000D               console log data  x000D            commit  SET USERS   data  x000D             x000D           catch err   gt    x000D            console log err  x000D             x000D         x000D      addItem   dispatch    payload    x000D        let formData   new FormData   x000D        formData append  name   payload name  x000D        formData append  file   payload file  x000D        formData append  category   payload category  x000D        formData append  price   payload price  x000D        formData append  stock   payload stock  x000D        formData append  description   payload description  x000D        axios   x000D          method   post   x000D          url   http   localhost 3000 products   x000D          data  formData  x000D          headers    x000D            token  localStorage getItem  token   x000D            x000D           x000D           then    data      gt    x000D               console log  data hasbeen created    data  x000D            dispatch  getAllItem   x000D             x000D           catch err   gt    x000D            console log err  x000D             x000D         x000D      getAllItem   commit      x000D        axios   x000D          method   get   x000D          url   http   localhost 3000 products  x000D           x000D           then    data      gt    x000D               console log data  x000D            commit  SET ALLITEM   data  x000D             x000D           catch err   gt    x000D            console log err  x000D             x000D         x000D      addUserCart   dispatch      payload  productId      x000D        let newCart     x000D          count  payload x000D          x000D           console log  ini dari store nya   productId  x000D   x000D        axios   x000D          method   post   x000D          url   http   localhost 3000 transactions   productId    x000D          data  newCart  x000D          headers    x000D            token  localStorage getItem  token   x000D            x000D           x000D           then    data      gt    x000D            dispatch  getUserCart   x000D               console log  cart hasbeen added    data  x000D             x000D           catch err   gt    x000D            console log err  x000D             x000D         x000D      getUserCart   commit      x000D        axios   x000D          method   get   x000D          url   http   localhost 3000 transactions user   x000D          headers    x000D            token  localStorage getItem  token   x000D            x000D           x000D           then    data      gt    x000D               console log data  x000D            commit  SET USERCART   data  x000D             x000D           catch err   gt    x000D            console log err  x000D             x000D         x000D      cartCheckout   commit  dispatch    transactionId    x000D        let count   null x000D        axios   x000D          method   post   x000D          url   http   localhost 3000 transactions checkout   transactionId    x000D          headers    x000D            token  localStorage getItem  token   x000D             x000D          data    x000D            sesuatu   sesuatu  x000D            x000D           x000D           then    data      gt    x000D            count   data count x000D            console log count  data  x000D   x000D            dispatch  getUserCart   x000D             x000D           catch err   gt    x000D            console log err  x000D             x000D         x000D      deleteTransactions   dispatch    transactionId    x000D        axios   x000D          method   delete   x000D          url   http   localhost 3000 transactions   transactionId    x000D          headers    x000D            token  localStorage getItem  token   x000D            x000D           x000D           then    data      gt    x000D            console log  success delete   x000D   x000D            dispatch  getUserCart   x000D             x000D           catch err   gt    x000D            console log err  x000D             x000D        x000D       x000D    modules     x000D     x000D   x000D   x000D

User · Answer

I tried literally everything to get this working  Theory I found that for some reason  changes to objects from  store don t necessarily trigger a  watch method  My workaround was to  Store  Create a complex data set which should but doesn t propagate changes to a Component Create an incrementing counter in the state to act as a flag  which does propagate changes to a Component when watched Create a method in  store mutators to alter the complex dataset and increment the counter flag   Component  Watch for changes in the  store state flag  When change is detected  update locally relevant reactive changes from the  store state complex data set Make changes to the  store state s dataset using our  store mutators method    Implementation This is implemented something like this  Store let store   Vuex Store     state        counter  0      data    someKey  0          mutations        updateSomeKey state  value          update the state data someKey   value        state counter                   Component   data        dataFromStoreDataSomeKey  null      someLocalValue  1        watch          store state counter             immediate  true          handler                   update locally relevant data            this someLocalValue   this  store state data someKey                          methods        updateSomeKeyInStore             this  store commit  updateSomeKey   someLocalValue        Runnable demo It s convoluted but basically here we are watching for a flag to change and then updating local data to reflect important changes in an object that s stored in the  state  x000D   x000D  Vue config devtools   false  const store   new Vuex Store     state        voteCounter  0         changes to objectData trigger a watch when keys are added         but not when values are modified      votes           people   0         companies   0         total   0                mutations        vote state  position          state votes position           state voteCounter                     app   new Vue     el    app     store  store    data        votesForPeople  null      votesForCompanies  null      pendingVote  null         computed        totalVotes           return this votesForPeople   this votesForCompanies            peoplePercent           if  this totalVotes  gt  0            return 100   this votesForPeople   this totalVotes         else           return 0                    companiesPercent           if  this totalVotes  gt  0            return 100   this votesForCompanies   this totalVotes         else           return 0                       watch          store state voteCounter             immediate  true          handler                  clone relevant data locally           this votesForPeople   this  store state votes people           this votesForCompanies   this  store state votes companies                         methods        vote event          if  this pendingVote            this  store commit  vote   this pendingVote                          x000D   lt script src  https   cdn jsdelivr net npm vue 2 6 12  gt  lt  script gt   lt script src  https   unpkg com vuex 3 5 1 dist vuex js  gt  lt  script gt   lt link rel  stylesheet  href  https   cdn jsdelivr net npm bootstrap 4 5 3 dist css bootstrap min css  gt     lt div id  app  gt      lt form  submit prevent  vote  event   gt         lt div class  form-check  gt            lt input            class  form-check-input              type  radio              name  vote              id  voteCorps             value  companies             v-model  pendingVote             gt            lt label class  form-check-label  for  voteCorps  gt           Equal rights for companies           lt  label gt         lt  div gt         lt div class  form-check  gt            lt input            class  form-check-input              type  radio              name  vote             id  votePeople              value  people             v-model  pendingVote            gt            lt label class  form-check-label  for  votePeople  gt           Equal rights for people           lt  label gt         lt  div gt         lt button         class  btn btn-primary           disabled  pendingVote  null         gt Vote lt  button gt      lt  form gt      lt div      class  progress mt-2       v-if  totalVotes  gt  0       gt         lt div class  progress-bar          role  progressbar          aria-valuemin  0           style   width      peoplePercent                 aria-aluenow  votesForPeople           aria-valuemax  totalVotes         gt People lt  div gt         lt div         class  progress-bar bg-success          role  progressbar          aria-valuemin  0           style   width      companiesPercent                 aria-valuenow  votesForCompanies           aria-valuemax  totalVotes         gt Companies lt  div gt      lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

You can also use mapState in your vue component to direct getting state from store   In your component   computed  mapState      my state       Where my state is a variable from the store

User · Answer

if you use typescript then you can     x000D   x000D  import   Watch   from  vue-property-decorator   x000D   x000D     x000D   x000D   Watch   store state something   x000D  private watchSomething     x000D        use this  store state something for access x000D         x000D    x000D   x000D   x000D

User · Answer

Create a Local state of your store variable by watching and setting on value changes  Such that the local variable changes for form-input v-model does not directly mutate the store variable   data       return       localState  null           computed         mapGetters       computedGlobalStateVariable   state globalStateVariable            watch      computedGlobalStateVariable   setLocalState       methods      setLocalState value       this localState   Object assign     value

User · Answer

When you want to watch on state level  it can be done this way   let App   new Vue                 store      watch              store state myState   function  newVal                console log newVal               store dispatch  handleMyStateChange

User · Answer

It s as simple as   watch        store state drawer   function         console log this  store state drawer

User · Answer

As mentioned above it is not good idea to watch changes directly in store  But in some very rare cases it may be useful for someone  so i will leave this answer  For others cases  please see  gabriel-robert answer  You can do this through state  watch  Add this in your created  or where u need this to be executed  method in component  this  store watch      function  state            return state my state             function                do something on data change                      deep  true   add this if u need to watch object properties change etc             More details  https   vuex vuejs org api  watch

User · Answer

If you simply want to watch a state property and then act within the component accordingly to the changes of that property then see the example below   In store js   export const state        gt      isClosed  false    export const mutations      closeWindow state  payload      state isClosed   payload        In this scenario  I am creating a boolean state property that I am going to change in different places in the application like so   this  store commit  closeWindow   true    Now  if I need to watch that state property in some other component and then change the local property I would write the following in the mounted hook   mounted      this  store watch    state   gt  state isClosed     value    gt       if  value    this localProperty    edit               Firstly  I am setting a watcher on the state property and then in the callback function I use the value of that property to change the localProperty   I hope it helps

User · Answer

Let s say  for example  that you have a basket of fruits  and each time you add or remove a fruit from the basket  you want to  1  display info about fruit count  but you also  2  want to be notified of the count of the fruits in some fancy fashion     fruit-count-component vue   lt template gt     lt  -- We meet our first objective  1  by simply -- gt     lt  -- binding to the count property  -- gt     lt p gt Fruits     count    lt  p gt   lt  template gt    lt script gt  import basket from     resources fruit-basket   export default        computed        count            return basket state fruits length          Or return basket getters fruitsCount           depends on your design decisions                watch        count  newCount  oldCount             Our fancy notification  2         console log  We have   newCount  fruits now  yay                 lt  script gt    Please note  that the name of the function in the watch object  must match the name of the function in the computed object  In the example above the name is count   New and old values of a watched property will be passed into watch callback  the count function  as parameters   The basket store could look like this   fruit-basket js  import Vue from  vue  import Vuex from  vuex   Vue use Vuex   const basket   new Vuex Store     state        fruits            getters        fruitsCount  state          return state fruits length                Obviously you would need some mutations and actions       but to make example cleaner I ll skip this part      export default basket   You can read more in the following resources    Computed properties and watchers API docs  computed API docs  watch

User · Answer

The best way to watch store changes is to use mapGetters as Gabriel said  But there is a case when you can t do it through mapGetters e g  you want to get something from store using parameter   getters      getTodoById   state  getters    gt   id    gt        return state todos find todo   gt  todo id     id          in that case you can t use mapGetters  You may try to do something like this instead   computed        todoById             return this  store getters getTodoById this id            But unfortunately todoById will be updated only if this id is changed   If you want you component update in such case use this  store watch solution provided by Gong  Or handle your component consciously and update this id when you need to update todoById

User · Answer

Inside the component  create a computed function  computed     myState function        return this  store state my state     return the state value in  my state          Now the computed function name can be watched  like  watch     myState function newVal oldVal          this function will trigger when ever the value of  my state  changes         The changes made in the vuex state my state will reflect in the computed function myState and trigger the watch function   If the state my state is having nested data  then the handler option will help more  watch     myState       handler function newVal oldVal            this function will trigger when ever the value of  my state  changes            deep true         This will watch all the nested values in the store my state

User · Answer

This is for all the people that cannot solve their problem with getters and actually really need a watcher  e g  to talk to non-vue third party stuff  see Vue Watchers on when to use watchers    Vue component s watchers and computed values both also work on computed values  So it s no different with vuex   import   mapState   from  vuex    export default       computed               mapState   somestate             someComputedLocalState                    is triggered whenever the store state changes             return this somestate     works too                        watch            somestate val  oldVal                   is triggered whenever the store state changes             console log  do stuff   val  oldVal                       if it s only about combining local and global state  the mapState s doc also provides an example   computed           mapState              to access local state with  this   a normal function must be used         countPlusLocalState  state              return state count   this localCount

User · Answer

I think the asker wants to use watch with Vuex    this  store watch         state   gt           return this  store getters your getter                 val   gt            something changed do something                           deep true

User · Answer

I used this way and it works   store js   const state       createSuccess  false      mutations js   mutations CREATE SUCCESS  state  payload        state createSuccess   payload      actions js  async  mutations STORE    commit    payload      try       let result   await axios post   api admin users   payload       commit mutations CREATE SUCCESS  user       catch  err        console log err           getters js  isSuccess  state   gt        return state createSuccess     And in your component where you use state from store   watch        isSuccess value          if  value            this  notify             title   Success             message   Create user success             type   success                                  When user submit form  action STORE will be call  after created success  CREATE SUCCESS mutation is committed after that  Turn createSuccess is true  and in component  watcher will see value has changed and trigger notification   isSuccess should be match with the name you declare in getters js

User · Answer

You should not use component s watchers to listen to state change  I recommend you to use getters functions and then map them inside your component   import   mapGetters   from  vuex   export default     computed           mapGetters         myState   getMyState                 In your store   const getters       getMyState  state   gt  state my state     You should be able to listen to any changes made to your store by using this myState in your component   https   vuex vuejs org en getters html the-mapgetters-helper

User · Answer

You could also subscribe to the store mutations   store subscribe  mutation  state    gt      console log mutation type    console log mutation payload       https   vuex vuejs org api  subscribe

[javascript] vue.js 2 how to watch store values from vuex

Examples related to javascript

Examples related to vue.js

Examples related to vuejs2

Examples related to vuex