【发布时间】：2019-03-01 10:14:32
【问题描述】：
我浏览了其他“DOM 未更新”的帖子，但未能找到解决方案。我正在尝试为初学者创建一个任务应用程序，并且该应用程序已经可以从 Firestore 加载，添加一个新的并删除一个。我有两个问题，但我想从第一个开始。当我添加、删除数据时，DOM 不会动态更新，尽管 Vuex 存储中的相应数组已正确更新。当我重新加载页面时，它也在更新。
我已经添加了组件和商店的代码，我希望我在正确的地方寻找，但我感觉我不是。
提前致谢
店铺代码：
import Vue from 'vue'
import Vuex from 'vuex'
// import firebase from 'firebase'
import router from '@/router'
import db from '@/db'
import firebase from '@/firebase'
Vue.use(Vuex)
export const store = new Vuex.Store({
state: {
appTitle: 'My Awesome App',
addedTask: false,
loadedTasks: false,
deletedTasks: false,
user: null,
error: null,
loading: false,
tasks: [],
task: {
title: '',
description: '',
tags: [],
dueTime: '',
dueDate: '',
reminderFlag: Boolean,
quadrant: '',
userId: '',
timestamp: ''
}
},
// Mutations (synchronous): change data in the store
mutations: {
setUser (state, payload) {
state.user = payload
state.task.userId = firebase.auth().currentUser.uid
},
setError (state, payload) {
state.error = payload
},
setLoading (state, payload) {
state.loading = payload
},
addedTask (state, payload) {
state.addedTask = payload
},
loadedTasks (state, payload) {
state.loadedTasks = true
},
deletedTask (state, payload) {
state.deletedTask = payload
}
},
// Actions (asynchronous/synchronous): change data in the store
actions: {
autoSignIn ({ commit }, payload) {
commit('setUser', { email: payload.email })
},
userSignUp ({ commit }, payload) {
commit('setLoading', true)
firebase.auth().createUserWithEmailAndPassword(payload.email, payload.password)
.then(firebaseUser => {
commit('setUser', { email: firebaseUser.user.email })
commit('setLoading', false)
router.push('/home')
commit('setError', null)
})
.catch(error => {
commit('setError', error.message)
commit('setLoading', false)
})
},
userSignIn ({ commit }, payload) {
commit('setLoading', true)
firebase.auth().signInWithEmailAndPassword(payload.email, payload.password)
.then(firebaseUser => {
commit('setUser', { email: firebaseUser.user.email })
commit('setLoading', false)
commit('setError', null)
router.push('/home')
})
.catch(error => {
commit('setError', error.message)
commit('setLoading', false)
})
},
userSignOut ({ commit }) {
firebase.auth().signOut()
commit('setUser', null)
router.push('/')
},
addNewTask ({ commit }, payload) {
commit('addedTask', false)
db.collection('tasks').add({
title: payload.title,
userId: firebase.auth().currentUser.uid,
createdOn: firebase.firestore.FieldValue.serverTimestamp(),
description: payload.description,
dueDateAndTime: new Date(payload.dueDate & ' ' & payload.dueTime),
reminderFlag: payload.reminderFlag,
quadrant: payload.quadrant,
tags: payload.tags
})
.then(() => {
commit('addedTask', true)
this.state.tasks.push(payload)
commit('loadedTasks', true)
})
.catch(error => {
commit('setError', error.message)
})
},
getTasks ({ commit }) {
commit('loadedTasks', false)
db.collection('tasks').orderBy('createdOn', 'desc').get().then(querySnapshot => {
querySnapshot.forEach(doc => {
const data = {
'taskId': doc.id,
'title': doc.data().title,
'quadrant': doc.data().quadrant
}
this.state.tasks.push(data)
})
commit('loadedTasks', true)
})
},
deleteTask ({ commit }, payload) {
db.collection('tasks').doc(payload).delete().then(() => {
this.state.tasks.pop(payload)
commit('deletedTask', true)
commit('loadedTasks', true)
}).catch(function (error) {
console.error('Error removing document: ', error)
commit('deletedTask', false)
})
}
},
// Getters: receive data from the store
getters: {
isAuthenticated (state) {
return state.user !== null && state.user !== undefined
}
}
})
这是组件（Vue app -> Home -> Grid -> Tasklist (this):
<template>
<v-card>
<v-card-title primary class="title">{{title}}</v-card-title>
<v-flex v-if="tasks.length > 0">
<v-slide-y-transition class="py-0" group tag="v-list">
<template v-for="(task, i) in tasks" v-if="task.quadrant === Id">
<v-divider v-if="i !== 0" :key="`${i}-divider`"></v-divider>
<v-list-tile :key="`${i}-${task.text}`">
<v-list-tile-action>
<v-checkbox v-model="task.done" color="info darken-3">
<div slot="label" :class="task.done && 'grey--text' || 'text--primary'" class="text-xs-right" v-text="task.title +' ('+ task.taskId +')'"></div>
</v-checkbox>
</v-list-tile-action>
<v-spacer></v-spacer>
<v-scroll-x-transition>
<v-btn flat icon color="primary" v-show="!deleteConfirmation" @click="deleteConfirmation = !deleteConfirmation">
<v-icon>delete</v-icon>
</v-btn>
</v-scroll-x-transition>
<v-scroll-x-transition>
<v-btn flat icon color="green" v-show="deleteConfirmation" @click="deleteConfirmation = !deleteConfirmation">
<v-icon>cancel</v-icon>
</v-btn>
</v-scroll-x-transition>
<v-scroll-x-transition>
<v-btn flat icon color="red" v-show="deleteConfirmation" @click="deleteConfirmation = !deleteConfirmation; deleteTask(task.taskId)">
<v-icon>check_circle</v-icon>
</v-btn>
</v-scroll-x-transition>
</v-list-tile>
</template>
</v-slide-y-transition>
</v-flex>
</v-card>
</template>
<script>
export default {
data () {
return {
deleteConfirmation: false
}
},
props: ['Id', 'title'],
computed: {
tasks () {
return this.$store.state.tasks
}
},
methods: {
deleteTask (taskId) {
console.log(taskId)
this.$store.dispatch('deleteTask', taskId)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.container {
max-width: 1200px;
}
</style>
【问题讨论】：
标签： javascript vue.js vuex vuetify.js