Почему передается весь массив, а не объект?

Question

[anton_trofimov95]

Пишу Todo. Хочу по клику тогглить значение выполнено/не выполнено. Но мне вместо объекта, в payload прилетает весь массив почему-то. Что может быть не так? Метод toggleTodo

App.vue

<template>
  <div id="app">
    <div v-for="todo in todos" :key="todo.id">
      <div :class="{ 'red': todo.completed }">{{ todo.title }}</div>
      <button @click="toggleTodo(todo)">Выполнено</button>
    </div>
    <input type="text" placeholder="Добавить todo" v-model="todo" />
    <button @click="addTodo">Добавить todo</button>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  name: "App",
  components: {},
  data() {
    return {
      todo: "",
    };
  },
  computed: {
    ...mapGetters({
      todos: "GET_TODOS_FROM_STORE",
    }),
  },
  methods: {
    ...mapActions(["fetchTodos", "toggleTodo"]),
    addTodo() {
      if (this.todo) {
        this.$store.dispatch("addTodo", this.todo);
      }
    },
  },
  mounted() {
    this.fetchTodos();
  },
};
</script>

<style>
.red {
  color: red;
}
</style>

Store
modules/todos.js

import Vue from 'vue'
import axios from 'axios'

Vue.use(axios)

export default {
    state: {
        todos: [],
    },
    mutations: {
        SET_TODOS(state, payload) {
            state.todos = payload
        },
        ADD_TODO(state, payload) {
            state.todos.push({
                title: payload,
                completed: false,
                id: Math.floor(Math.random() * (300 - 10 + 1)) + 10,
                userId: 1,
            })
        },
        TOGGLE_TODO(payload) {
            console.log(payload)
        }
    },
    actions: {
        fetchTodos({ commit }) {
            axios.get('https://jsonplaceholder.typicode.com/todos/?_limit=10')
                .then(response => response.data)
                .then(todos => {
                    commit('SET_TODOS', todos)
                })
        },
        addTodo({ commit }, payload) {
            commit('ADD_TODO', payload)
        },
        toggleTodo({ commit }, payload) {
            commit('TOGGLE_TODO', payload)
        }
    },
    getters: {
        GET_TODOS_FROM_STORE(state) {
            return state.todos
        }
    }
}

Answer 1

[VegasChickiChicki]

В мутации нагрузка передается вторым аргументом, первым у вас является state хранилища.

Comments

[anton_trofimov95]

А если он не используется в мутации, куда его девать?

[VegasChickiChicki]

anton_trofimov95, Никуда.

TOGGLE_TODO(emtpy, payload) {
            console.log(payload)
        }