質問概要
Vuejsファイルからアクションを実行し、Storeの更新をしたのですがDOMが更新されません。
gettersでstateを取得している場合は、DOMの更新が検知されないのでしょうか?
(初期値を登録するなどのなにか特別な方法がある?)
chromeのconsole.log内のVueタブを見ると、storeは更新されている様子です。
※関数名などは気になさらないでください。(抜粋していますので...)
ソースコード
storeファイル
javascript
1import _ from 'lodash' 2import api from '../../utils/axios' 3 4const state = { 5 projects: [ 6 { 7 id: 0, 8 title: '' 9 } 10 ] 11} 12 13const getters = { 14 getProjects: state => state.projects, 15} 16 17const mutations = { 18 UPDATE_PROJECTS (state, payload) { 19 state.projects = Object.assign(state.projects, payload) 20 } 21} 22 23const actions = { 24 async updateBySearchQuery ({commit}, payload) { 25 return api.get('/', { 26 params: {} 27 }) 28 .then((response) => { 29 const res = response.data.map(p => { 30 return Object.assign(p, { 31 id: p.projectId 32 }) 33 }) 34 commit('UPDATE_PROJECTS', res) 35 }) 36 .catch((error) => { 37 console.error(error) 38 }) 39 } 40} 41 42export default { 43 namespaced: true, 44 state, 45 getters, 46 mutations, 47 actions 48} 49
Vueファイル
vuejs
1<template lang="pug"> 2 #search-container 3 .search-results 4 ul.post-list 5 li(v-for="project in projects" :key="project.id") 6 article.post-list__article 7 router-link.posts-list__post(:to="'project/'+project.id") 8 h2.title-row__text {{project.title}} 9</template> 10 11<script> 12import { mapGetters, mapActions } from 'vuex' 13 14export default { 15 mounted () { 16 this.updateBySearchQuery() 17 }, 18 methods: { 19 ...mapActions('projects', { 20 updateBySearchQuery: 'updateBySearchQuery' 21 }) 22 }, 23 computed: { 24 ...mapGetters('projects', { 25 projects: 'getProjects' 26 }) 27 } 28} 29</script> 30
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。