Существует ли create () для действий vuex для автоматической отправки - PullRequest
Новая
       19

Существует ли create () для действий vuex для автоматической отправки

0 голосов
/ 23 января 2019

У меня есть действие в 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>

1 Ответ

0 голосов
/ 23 января 2019

Есть много более чистых способов сделать это.

Прежде всего, если вы используете 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>

Middleware 

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

В зависимости от вашего варианта использования вы можете оставить это промежуточное ПО глобальным (привязанным к маршрутам) или прикрепленным к определенному макету.

вот рабочий песочница пример. надеюсь, это поможет вам.

...