是否有用于自动调度 vuex 操作的 created()

Question

我在 vuex 中有一个动作，我想在 vuex 本身而不是组件中自动调度。

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

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

请注意：我使用的是 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>

Answer 1

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

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

其次，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
};

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

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

这是一个有效的sandbox 示例。希望对您有所帮助。