Vuex:计算 属性 Returns 未定义 - asyc Axios
Vuex: Computed Property Returns Undefined - asyc Axios
我对我的数据库进行了异步 axios 调用,当网站加载时,我将通过一个操作进行调度。
(我已经尝试在我的 Vue 路由器上的 beforeEnter()、beforeCreated() 和我的 Form.Vue 上的 Created() 中调度)
我使用 getter.
计算了 属性 return 信息
我遇到的问题是数据在页面加载完成后到达那里并且 returns 未定义 - 页面上没有呈现任何内容。
如果我检查我的 Vue DevTools,所有数据都在状态中的正确位置。
如何让数据在页面之前完成加载?
//动作
async loadInputs({ state, getters, commit, dispatch }) {
if (!state.loading) {
commit('setLoading', true)
const inputLists = axios.get('/companyInputLists')
const inputs = axios.get('/companyInputs')
commit('setLoading', false)
commit('loadInputs' , [await inputLists, await inputs])
}
},
set ({commit}, value) {
commit('updateValue', value)
},
//突变体
setLoading(state, value) {
state.loading = value
},
loadInputs(state, data){
state.layout = {}
state.data = {}
data[0].data.map(list => {
list['inputs'] = []
state.layout[list.order] = list
data[1].data.map(input => {
if(input.list_id == list.id){
state.layout[list.order].inputs.push(input)
state.data[input.label] = ''
}
})
})
},
updateValue(state, value) {
state.data[value.type] = value.value
},
//盖特斯
get(state) {
console.log(state)
return state
},
}
//FORM.VUE
<span>
//LIST TEST and v-if test
<div v-if="lists">
{{lists}}
</div>
test
{{ lists }}
<v-layout row wrap justify-center>
<draggable class="dragArea layout row wrap justify-center" :options="{group:'lists'}">
<v-flex v-for="list in lists" v-bind:key="list.index" :class="[list.label, flexBoxSize(list.size)]">
<v-subheader v-text="list.label"></v-subheader>
<draggable class="dragArea layout row wrap" :options="{group:'inputs'}">
<v-flex v-for="item in list.inputs" v-bind:key="item.index" :class="[item.label, flexBoxSize(item.size)]">
<textfield v-if="item.type_id == 1" formType="clientForm" :label="item.label" :required="item.required"></textfield>
<email v-if="item.type_id == 2" formType="clientForm" :label="item.label" :required="item.required"></email>
<phone v-if="item.type_id == 3" formType="clientForm" :label="item.label" :required="item.required"></phone>
<calendar v-if="item.type_id == 4" formType="clientForm" :label="item.label" :required="item.required"></calendar>
<googleMap v-if="item.type_id == 5" formType="clientForm" :label="item.label" :required="item.required"></googleMap>
<autocomplete v-if="item.type_id == 6" formType="clientForm" :label="item.label" :required="item.required"></autocomplete>
</v-flex>
</draggable>
</v-flex>
</draggable>
<v-layout row wrap justify-center>
<submitButton formType="clientForm" path="/clientForm" :references="this.$refs"></submitButton>
<clearButton formType="clientForm" :references="this.$refs"></clearButton>
</v-layout>
</v-layout>
</span>
</template>
<script>
export default {
components: {
draggable,
},
beforeCreate(){
this.$store.dispatch('clientForm/loadInputs')
},
computed: {
lists: {
get() {
return this.$store.getters['clientForm/get'].layout
},
set(value) {
this.$store.commit('clientForm/updateInputList', value)
}
}
},
Vuex Dev Tools Showing Data in State After Page Loads
我认为你可以简化你的 loadInputs
操作:
async loadInputs ({commit, state}) {
if (!state.loading) {
commit('setLoading', true)
const inputLists = axios.get('/companyInputLists')
const inputs = axios.get('/companyInputs')
commit('setLoading', false)
commit('loadInputs' , [await inputLists, await inputs])
}
}
组件:
export default {
components: {
draggable,
},
computed: {
lists: {
get() {
return this.$store.getters['clientForm/get'].layout
},
set(value) {
this.$store.commit('clientForm/updateInputList', value)
}
}
},
created () {
this.$store.dispatch('clientForm/loadInputs')
},
}
我在去年的寒假里找到了答案,发现这里从来没有一个明确的结论。经过反复试验和阅读文档后,我在 Vue.js 文档中找到了答案。
https://vuejs.org/v2/api/#Vue-set
Vue.set(目标、键、值)
添加一个 属性 到反应对象,确保新的 属性 也是反应的,因此触发视图更新。这必须用于向反应对象添加新属性,因为 Vue 无法检测正常的 属性 添加(例如 this.myObject.newProperty = 'hi')。
使用此功能,我能够通过 axios 调用加载我的数据,并让 Vue 检测更改并更新 DOM。
您可能还需要注意 Vue.delete 以删除具有反应性的数据。
我对我的数据库进行了异步 axios 调用,当网站加载时,我将通过一个操作进行调度。 (我已经尝试在我的 Vue 路由器上的 beforeEnter()、beforeCreated() 和我的 Form.Vue 上的 Created() 中调度)
我使用 getter.
计算了 属性 return 信息我遇到的问题是数据在页面加载完成后到达那里并且 returns 未定义 - 页面上没有呈现任何内容。
如果我检查我的 Vue DevTools,所有数据都在状态中的正确位置。
如何让数据在页面之前完成加载?
//动作
async loadInputs({ state, getters, commit, dispatch }) {
if (!state.loading) {
commit('setLoading', true)
const inputLists = axios.get('/companyInputLists')
const inputs = axios.get('/companyInputs')
commit('setLoading', false)
commit('loadInputs' , [await inputLists, await inputs])
}
},
set ({commit}, value) {
commit('updateValue', value)
},
//突变体
setLoading(state, value) {
state.loading = value
},
loadInputs(state, data){
state.layout = {}
state.data = {}
data[0].data.map(list => {
list['inputs'] = []
state.layout[list.order] = list
data[1].data.map(input => {
if(input.list_id == list.id){
state.layout[list.order].inputs.push(input)
state.data[input.label] = ''
}
})
})
},
updateValue(state, value) {
state.data[value.type] = value.value
},
//盖特斯
get(state) {
console.log(state)
return state
},
}
//FORM.VUE
<span>
//LIST TEST and v-if test
<div v-if="lists">
{{lists}}
</div>
test
{{ lists }}
<v-layout row wrap justify-center>
<draggable class="dragArea layout row wrap justify-center" :options="{group:'lists'}">
<v-flex v-for="list in lists" v-bind:key="list.index" :class="[list.label, flexBoxSize(list.size)]">
<v-subheader v-text="list.label"></v-subheader>
<draggable class="dragArea layout row wrap" :options="{group:'inputs'}">
<v-flex v-for="item in list.inputs" v-bind:key="item.index" :class="[item.label, flexBoxSize(item.size)]">
<textfield v-if="item.type_id == 1" formType="clientForm" :label="item.label" :required="item.required"></textfield>
<email v-if="item.type_id == 2" formType="clientForm" :label="item.label" :required="item.required"></email>
<phone v-if="item.type_id == 3" formType="clientForm" :label="item.label" :required="item.required"></phone>
<calendar v-if="item.type_id == 4" formType="clientForm" :label="item.label" :required="item.required"></calendar>
<googleMap v-if="item.type_id == 5" formType="clientForm" :label="item.label" :required="item.required"></googleMap>
<autocomplete v-if="item.type_id == 6" formType="clientForm" :label="item.label" :required="item.required"></autocomplete>
</v-flex>
</draggable>
</v-flex>
</draggable>
<v-layout row wrap justify-center>
<submitButton formType="clientForm" path="/clientForm" :references="this.$refs"></submitButton>
<clearButton formType="clientForm" :references="this.$refs"></clearButton>
</v-layout>
</v-layout>
</span>
</template>
<script>
export default {
components: {
draggable,
},
beforeCreate(){
this.$store.dispatch('clientForm/loadInputs')
},
computed: {
lists: {
get() {
return this.$store.getters['clientForm/get'].layout
},
set(value) {
this.$store.commit('clientForm/updateInputList', value)
}
}
},
Vuex Dev Tools Showing Data in State After Page Loads
我认为你可以简化你的 loadInputs
操作:
async loadInputs ({commit, state}) {
if (!state.loading) {
commit('setLoading', true)
const inputLists = axios.get('/companyInputLists')
const inputs = axios.get('/companyInputs')
commit('setLoading', false)
commit('loadInputs' , [await inputLists, await inputs])
}
}
组件:
export default {
components: {
draggable,
},
computed: {
lists: {
get() {
return this.$store.getters['clientForm/get'].layout
},
set(value) {
this.$store.commit('clientForm/updateInputList', value)
}
}
},
created () {
this.$store.dispatch('clientForm/loadInputs')
},
}
我在去年的寒假里找到了答案,发现这里从来没有一个明确的结论。经过反复试验和阅读文档后,我在 Vue.js 文档中找到了答案。
https://vuejs.org/v2/api/#Vue-set
Vue.set(目标、键、值) 添加一个 属性 到反应对象,确保新的 属性 也是反应的,因此触发视图更新。这必须用于向反应对象添加新属性,因为 Vue 无法检测正常的 属性 添加(例如 this.myObject.newProperty = 'hi')。
使用此功能,我能够通过 axios 调用加载我的数据,并让 Vue 检测更改并更新 DOM。
您可能还需要注意 Vue.delete 以删除具有反应性的数据。