simonjcarr

import { v4 as uuid } from "uuid";
import _ from "lodash";
export default {
  namespaced: true,
  state: {
    tasks: [
      {
        id: "1234567890",
        title: "First Task",
        complete: false,

simonjcarr

<div
  class="w-5/6"
  :class="{ 'text-red-500 line-through': task.complete }"
>
  {{ task.title }}
  {{ task.complete ? ` Complete by ${task.completedBy}` : "" }}
</div>

simonjcarr

<template>
  <div>
    <div class="text-3xl">Todo's</div>
    <form @submit.prevent="addTaskSubmit" class="flex mb-4">
      <input
        type="text"
        placeholder="Enter a new task"
        class="w-full p-2 shadow rounded-l bg-blue-200 text-blue-600"
        v-model="newTask"
      />

simonjcarr

<template>
  <div>
    <div class="text-3xl">Todo's</div>
    <div
      class="flex p-2 border-b-2 border-blue-200"
      v-for="task in tasks"
      :key="task.id"
    >
      <div class="w-1/6">
        <button

simonjcarr

<template>
  <div></div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  computed: {
    ...mapState("Todo", ["tasks"])
  },

simonjcarr

//...
<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState("Todo", ["tasks"])
  }
};
</script>
//...

simonjcarr

<template>
  <div></div>
</template>

<script>
export default {};
</script>

<style></style>

simonjcarr

actions: {
    addTask({ commit }, task) {
      commit("addTask", task);
    },
    setTaskStatus({ commit }, payload) {
      commit("setTaskStatus", payload);
    },
    deleteTask({ commit }, id) {
      commit("deleteTask", id);
    }

simonjcarr

import { v4 as uuid } from "uuid";
import _ from "lodash";
export default {
  namespaced: true,
  state: {
    tasks: [
      {
        id: "1234567890",
        title: "First Task",
        complete: false

simonjcarr

export default {
  namespaced: true,
  state: {
    tasks: [{ id: '1234567890', title: "First Task", complete: false }]
  },
  mutations: {},
  actions: {}
};