Javascript 是否为vuex操作创建了一个自动分派的（）

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

我创建了一个通知栏，可以通过多个页面上的不同通知进行更改。我创建了一个存储来设置要显示的通知，而不是在切换页面时从头开始显示通知

我想从vuex内部而不是从组件内部调度vuex存储中的rotate函数

请注意：我使用的是Nuxt

VUEX状态：store/notifications.js

export const state=（）=>({
节：0，
通知：[
“通知1”，
“通知2”，
“通知3”
]
})
导出常量突变={
公司科（州）{
州政府部门++
},
重置部分（状态）{
state.section=0
}
}
导出常量操作={
旋转（{commit，dispatch，state}）{
设置超时（（）=>{
让总数=state.notifications.length-1
如果（state.section==总计）{
提交（'RESET_SECTION'）
}
否则{
提交（'INC_SECTION'）
}
分派（‘轮换’）
}, 3500)
}
}
导出默认值{
国家,，
突变，
行动
}

有很多更干净的方法可以做到这一点

首先，如果您使用的是Nuxt，那么在IMO中，您应该使用其出色的特性来调度操作（您的用例是在组件级别不保留它）

其次，Vuex为我们提供了

mapGetters

功能，使状态属性在组件中可用，同时保持其反应性

因此，您可以执行以下操作：

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
};

<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>

Vue组件：

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
};

<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>

根据您的用例，您可以将此中间件保持全局（连接到路由），或连接到特定布局

---

下面是一个工作示例。希望这能帮到你。

谢谢你抽出时间来帮忙。这只在我改变路线时起作用，每次我改变路线时它都会触发它，所以我和以前一样有同样的问题。有没有办法只在初始站点加载时触发中间件？为了解决这个问题，我创建了一个插件，而不是名为onload.js的中间件：

导出默认函数（{app，store}）{app.router.onReady（（）=>store.dispatch（“rotate”）}

并更新了nuxt.config.js

插件：[{src:'~/plugins/onLoad.js'，ssr:false}]