是否有用于自动分派 vuex 动作的 created() [英] Is there a created() for vuex actions to auto dispatch

问题描述

我在 vuex 中有一个动作，我想在 vuex 本身而不是组件中自动分派.

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

我创建了一个通知栏，通过多个页面上的不同通知进行更改.当我切换页面时，我创建了一个商店来设置要显示的通知，而不是从头开始通知.

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.

我想从 vuex 内而不是从组件内分派 vuex 存储中的旋转函数

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

请注意:我使用的是 Nuxt

VUEX 状态: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({commit, dispatch, state}) {
            setTimeout(() => {
                
                let total = state.notifications.length -1
    
                if (state.section === total) {
                    commit('RESET_SECTION')
                }
                else {
                    commit('INC_SECTION')
                }
                dispatch('rotate')
    
            }, 3500)
    }
}

export default {
    state,
    mutations,
    actions
}

VUE JS 组件:

<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: [] }
  },
  computed: {
    setData() {
      this.notifications = this.$store.state.notifications.notifications
    }
  },
  created() {
    this.setData
  }
}

</script>

推荐答案

有很多更简洁的方法可以做到这一点.

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

首先，如果您使用的是 Nuxt，那么 IMO 您应该使用其出色的 中间件功能 用于调度操作(在组件级别不保留它的用例).

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 component level).

其次，Vuex 为我们提供了 mapGetters 功能，使组件中的状态属性可用，同时保持它们的反应性.

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

因此，您可以使用以下方法:

So, you can go with the following:

Vuex 商店:

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({ commit, dispatch, state }) {
    setTimeout(() => {
      let total = state.notifications.length - 1;
      if (state.section === total) {
        commit("RESET_SECTION");
      } else {
        commit("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 组件:

<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 {};
  },
  computed: {
    ...mapGetters(["notifications", "section"])
  }
};
</script>

中间件

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.

这篇关于是否有用于自动分派 vuex 动作的 created()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！