This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div> | |
<h1>All todo items </h1> | |
<div v-for="(item,index) in $store.getters['getAllTodos']" :key="index"> | |
<span>{{ item }}</span> | |
</div> | |
</div> | |
</template> | |
<script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div>Item from store without getters</div> | |
<h3>{{ $store.state.name }}</h3> | |
</template> | |
<script> | |
export default { | |
data: () => ({ | |
name: '' | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div> | |
<input type="text" v-model="todo" name="todo" id="addtodo"/> | |
<button @click="addTodo">Add New Todo</button> | |
</div> | |
</template> | |
<script> | |
export default { | |
name: "Todo", | |
data() { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Path may change depending on where you created the store configurations | |
import store from "./index.js" | |
new Vue({ | |
store, | |
//..other plugins here | |
}).$mount("#app") |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const state = { | |
todos: [] | |
} | |
const mutations = { | |
ADD_TODO(state, payload) { | |
state.todos.push(payload) | |
} | |
} |