Запретить "пушить" в массив, если его длина превышает 8?

Question

Как запретить "пушить" в массив, если его длина превышает 8?

Где lengthMesseges - получают длину из "геттера"

Где sentMessege - "пушит" в массив

methods: {
    ...mapMutations(["createMessage"]),
    sentMessege() {
      this.createMessage({
        messege: this.messege
      });
      if (lengthMesseges==8) {
        !sentMessege
      }
    }
  },
  computed: mapGetters(["lengthMesseges"])

Answer 1

Например, при условиях, что:

lengthMessages - длина массива messages в vuex state

проверяем длину в методе добавления pushMessage, как :

pushMessage() {
  if (this.lengthMessages < 8) {
    this.createMessage({
      text: `item ${this.lengthMessages + 1}`
    })
  }
}

Привожу пример:

const store = new Vuex.Store({
  state: {
    messages: []
  },
  getters: {
    lengthMessages: state => state.messages.length,
  },
  mutations: {
    createMessage(state, data) {
      state.messages.push(data);
    }
  },
})
const {
  mapState,
  mapMutations,
  mapGetters
} = Vuex
const app = new Vue({
  el: '#app',
  name: 'vuexTest',
  store,
  data() {
    return {};
  },
  computed: {
    ...mapState(['messages']),
    ...mapGetters(['lengthMessages'])
  },
  methods: {
    ...mapMutations(['createMessage']),
    sentMessege() {
      if (this.lengthMessages < 8) {
        this.createMessage({
          text: `item ${this.lengthMessages + 1}`
        })
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuex.js"></script>

<div id="app">
  <button @click="sentMessege">push</button>
  <br>количество записей (vuex messages) = {{ lengthMessages }}
  <pre>{{ $store.state }}</pre>
</div>

БЛОГ НА HUSL

Запретить "пушить" в массив, если его длина превышает 8?

Ответы (1 шт):