I have an action within vuex that I would like to auto dispatch within vuex itself rather than a ponent.

I have created a notification bar that changes through different notifications which is on multiple pages. Rather than the notifications start from the beginning when I switch page I have created a store to set which notification to show.

I would like to dispatch the rotate function in the vuex store from within vuex rather than from within a ponent

Please note: I'm using Nuxt

VUEX State: store/notifications.js

export const state = () => ({
    section: 0,
    notifications: [
        'notification 1',
        'notification 2',
        'notification 3'
    ]
})

export const mutations = {
    INC_SECTION(state) {
        state.section ++
    },
    RESET_SECTION(state) {
        state.section = 0
    }
}

export const actions = {
    rotate({mit, dispatch, state}) {
            setTimeout(() => {
                
                let total = state.notifications.length -1
    
                if (state.section === total) {
                    mit('RESET_SECTION')
                }
                else {
                    mit('INC_SECTION')
                }
                dispatch('rotate')
    
            }, 3500)
    }
}

export default {
    state,
    mutations,
    actions
}

I have an action within vuex that I would like to auto dispatch within vuex itself rather than a ponent.

I have created a notification bar that changes through different notifications which is on multiple pages. Rather than the notifications start from the beginning when I switch page I have created a store to set which notification to show.

I would like to dispatch the rotate function in the vuex store from within vuex rather than from within a ponent

Please note: I'm using Nuxt

VUEX State: store/notifications.js

export const state = () => ({
    section: 0,
    notifications: [
        'notification 1',
        'notification 2',
        'notification 3'
    ]
})

export const mutations = {
    INC_SECTION(state) {
        state.section ++
    },
    RESET_SECTION(state) {
        state.section = 0
    }
}

export const actions = {
    rotate({mit, dispatch, state}) {
            setTimeout(() => {
                
                let total = state.notifications.length -1
    
                if (state.section === total) {
                    mit('RESET_SECTION')
                }
                else {
                    mit('INC_SECTION')
                }
                dispatch('rotate')
    
            }, 3500)
    }
}

export default {
    state,
    mutations,
    actions
}

VUE JS Component:

<template>
  <section class="notifications">
    <template v-for="(notification, i) in notifications" >
      <p v-if="$store.state.notifications.section === i" :key="i">{{notification}}</p>
    </template>
  </section>
</template>

<script>
export default {
  data() {
    return { notifications: [] }
  },
  puted: {
    setData() {
      this.notifications = this.$store.state.notifications.notifications
    }
  },
  created() {
    this.setData
  }
}

</script>

• javascript
• vue.js
• vuex
• nuxt.js

1 Answer 1

There are a lot of much cleaner ways you can do this.

First of all if you are using Nuxt, then, IMO you should be using its awesome feature of middlewares for dispatching actions (your use case of not keeping it, on the ponent level).

Secondly, Vuex provides us mapGetters functionality which makes the state properties available in the ponents while keeping them reactive, at the same time, too.

So, you can go with the following:

Vuex Store:

export const state = () => ({
  section: 0,
  notifications: ["notification 1", "notification 2", "notification 3"]
});

export const mutations = {
  INC_SECTION(state) {
    state.section++;
  },
  RESET_SECTION(state) {
    state.section = 0;
  }
};

export const actions = {
  rotate({ mit, dispatch, state }) {
    setTimeout(() => {
      let total = state.notifications.length - 1;
      if (state.section === total) {
        mit("RESET_SECTION");
      } else {
        mit("INC_SECTION");
      }
      dispatch("rotate");
    }, 3500);
  }
};

export const getters = {
  notifications(state) {
    return state.notifications;
  },
  section(state) {
    return state.section;
  }
};

export default {
  state,
  mutations,
  actions,
  getters
};

Vue Component:

<template>
  <section class="notifications">
    <template v-for="(notification, i) in notifications">
      <p v-if="section === i" :key="i">{{ notification }}</p>
    </template>
  </section>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {};
  },
  puted: {
    ...mapGetters(["notifications", "section"])
  }
};
</script>

Middleware

export default function({ store }) {
  store.dispatch("rotate");
}

depending on your use case, you can keep this middleware global (attached to routes), or attached to a specific layout.

here is a working sandbox example. hope this will help you out.