Javascript 如何将Firebase添加到Vuex待办事项列表应用程序?
我正在使用Vue.js、Vuex和Firebase构建一个简单的Vue.js待办事项列表应用程序。Vuex应用商店按其应有的方式发送、提交和返回输入的数据,但我希望能够将应用程序连接到Firestore数据库。到目前为止,我已经成功地设置了应用程序,以便将数据推送到集合中,但我还希望数据库将firestore数据的快照返回到DOM,并允许从数据库中删除数据。我有在简单的非Vuex项目中使用这些Firestore方法的经验,但不确定如何使用Vuex存储合成Firestore方法。我该怎么做?这是我到目前为止所拥有的。非常感谢Javascript 如何将Firebase添加到Vuex待办事项列表应用程序?,javascript,firebase,vue.js,google-cloud-firestore,vuex,Javascript,Firebase,Vue.js,Google Cloud Firestore,Vuex,我正在使用Vue.js、Vuex和Firebase构建一个简单的Vue.js待办事项列表应用程序。Vuex应用商店按其应有的方式发送、提交和返回输入的数据,但我希望能够将应用程序连接到Firestore数据库。到目前为止,我已经成功地设置了应用程序,以便将数据推送到集合中,但我还希望数据库将firestore数据的快照返回到DOM,并允许从数据库中删除数据。我有在简单的非Vuex项目中使用这些Firestore方法的经验,但不确定如何使用Vuex存储合成Firestore方法。我该怎么做?这是我
<!--GetTodo.vue-->
<template>
<div id="get-todo" class="container">
<input class="form-control" :value="newTodo" @change="getTodo" placeholder="I need to...">
<button class="btn btn-primary" @click="addTodo">Add New Post</button>
<ul class="list-group">
<li class="list-group-item" v-for="todo in todos">
{{todo.body}}
<div class="btn-group">
<button type="button" @click="remove(todo)" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-remove-circle"></span> Remove
</button>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
methods: {
getTodo(e) {
this.$store.dispatch('getTodo', e.target.value)
},
addTodo() {
this.$store.dispatch('addTodo')
this.$store.dispatch('clearTodo')
},
remove(todo){
this.$store.dispatch('removeTodo', todo)
}
},
computed: {
todos(){
return this.$store.getters.todos
},
newTodo() {
return this.$store.getters.newTodo
}
}
}
</script>
<style>
</style>
从“./components/GetTodo.vue”导入GetTodo
导出默认值{
组成部分:{
盖托多
}
}
身体{
字体系列:Helvetica,无衬线;
}
李{
利润率:10px;
}
您可以在变异中进行同步,请参见下面的示例:
资料来源:
您可以在变体中进行同步,请参见以下示例: 资料来源:
//store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
import db from '../firebase';
export default new Vuex.Store({
state: {
todos: [],
newTodo: ''
},
mutations: { //syncronous, committed
GET_TODO(state, todo){
state.newTodo = todo
},
ADD_TODO(state){
state.todos.push({
body: state.newTodo,
completed: false
})
db.collection('messages').add({
content: state.newTodo
})
},
REMOVE_TODO(state, todo){
var todos = state.todos
todos.splice(todos.indexOf(todo), 1)
},
CLEAR_TODO(state){
state.newTodo = ''
}
},
actions: { //asyncronous, dispatched
getTodo({commit}, todo){
commit('GET_TODO', todo)
},
addTodo({commit}){
commit('ADD_TODO')
},
removeTodo({commit}, todo){
commit('REMOVE_TODO', todo)
},
clearTodo({commit}){
commit('CLEAR_TODO')
}
},
getters: {
newTodo: state => state.newTodo,
todos: state => state.todos.filter((todo) => {
return !todo.completed
})
}
})
<!--App.vue-->
<template>
<div id="app" class="container">
<GetTodo></GetTodo>
</div>
</template>
<script>
import GetTodo from './components/GetTodo.vue'
export default {
components: {
GetTodo
}
}
</script>
<style>
body {
font-family: Helvetica, sans-serif;
}
li {
margin: 10px;
}
</style>
import Vue from 'vue'
import Vuex from 'vuex'
import { db } from '@/main'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
items: null
},
getters: {
getItems: state => {
return state.items
}
},
mutations: {
setItems: state => {
let items = []
db.collection('items').orderBy('created_at').onSnapshot((snapshot) => {
items = []
snapshot.forEach((doc) => {
items.push({ id: doc.id, title: doc.data().title })
})
state.items = items
})
}
},
actions: {
setItems: context => {
context.commit('setItems')
}
}
})
import { db } from '@/main'
export default {
name: 'home',
beforeCreate: function () {
this.$store.dispatch('setItems')
},
data: function () {
return {
myTodo: '',
errors: ''
}
},