vuex-remotedev/example/App.vue at master · jhen0409/vuex-remotedev · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<template>
  <view class="container">
    <add-todo :on-add='addTodo' />
    <scroll-view>
      <view class='todo-wrapper' v-for='(todo, index) in $store.state.todos' :key='index'>
        <todo-item
          :todo='todo'
          :selected-index='index'
          :edit-pressed='editTodoPress'
          :edit-todo='editTodo'
          :delete-todo='deleteTodo'
          :cancel-edit='cancelEdit'
          :toggle-task-status='toggleTaskStatus'
        />
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { mapActions } from 'vuex'
import store from './store'
import AddTodo from './src/AddTodo'
import TodoItem from './src/TodoItem'

export default {
  store,
  data: () => ({}),
  components: {
    AddTodo,
    TodoItem
  },
  methods: {
    ...mapActions([
      'addTodo',
      'editTodoPress',
      'editTodo',
      'cancelEdit',
      'toggleTaskStatus',
      'deleteTodo',
    ]),
  }
}
</script>

<style>
.container {
  background-color: white;
  flex: 1;
  padding-top: 40;
}
.todo-wrapper {
  margin-horizontal: 15;
  background-color: beige;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  margin-vertical: 2.5;
  padding: 10;
  border-radius: 5;
}
</style>