vuex数据在什么时候初始化比较合适(使用vue-resource情况下)

最近学习vue,使用vue-router,是在vue-router的data函数里面调用vue-resource调用api初始化数据,还是在vue里面初始化数据,如果是在vue里面的话,又使用哪个函数呢?created还是data还是别的函数

这个得根据具体请求，
在vue的初始化数据也是需要考虑放在哪个生命周期节点的。

放在ready里面

如果有用到 vue-router 的話，最好就是在 vue-router 中的 data 去處理頁面渲染前的數據載入或初始化。

實現

這是實現 Vue + VueRouter + VueResource 的例子

jsFiddle

@Tomoe 那如果我使用vuex来管理组件数据呢?是在vue-router的data函数中调用vuex的actions然后再根据vuex的getters同步数据吗?如果是按照上面的思路,我怎么保证组件是在拿到数据之后渲染的呢! by 題主

原先是在 jsFiddle 上寫的，後來發現在上面使用 vuex 會出現些問題...
所以這邊我就直接在本機寫了。

首先一樣是利用 route 的 transition 來處理，只是加入了 vuex 的 actions 後變得稍稍複雜點：

這邊要在進入 PostListPage 時，讀取後台資料進入 state ，取得成功才顯示頁面。

項目結構

components
- HomePage.vue
- PostsListPage.vue
vuex
- store.js
- actions.js
App.vue
main.js

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'

import App from './App'
import HomePage from './components/HomePage'
import PostListPage from './components/PostListPage'

import store from './vuex/store'

Vue.use(VueRouter)
Vue.use(VueResource)

const router = new VueRouter()

router.map({
  '/': { component: HomePage },
  '/posts': { component: PostListPage }
})

router.start({
  ...App,
  store
}, '#app')

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
  posts: [], // 儲存取得的全部文章
 }

const mutations = {
  FETCH_POSTS_REQUEST(state) { },

  FETCH_POSTS_SUCCESS(state, posts) { state.posts = posts },

  FETCH_POSTS_FAILURE(state, res) { }
}

export default new Vuex.Store({
  state,
  mutations
})

actions.js

import Vue from 'vue'

export const fetchPosts = ({dispatch}) => {
  dispatch('FETCH_POSTS_REQUEST')
  // 重要！記得要 return ，data那裡才取得到 Promise
  return Vue.http.get('https://jsonplaceholder.typicode.com/posts')
  .then(res => {
    dispatch('FETCH_POSTS_SUCCESS', res.json())
  })
  .catch(res => {
    dispatch('FETCH_POSTS_FAILURE', res)
    return Promise.reject() // 這邊必須手動 reject
  })
}

App.vue

<template>
  <div>
    <h1>Hello App!</h1>
    <p>
      <a v-link="{ path: '/' }">Home</a>
      <a v-link="{ path: '/posts' }">Posts</a>
    </p>

    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {

}

</script>

PostListPage

<template>
  <div class="hello">
    <h1>FOO</h1>
    <h3>讀取到了{{posts.length}}筆資料</h3>
  </div>
</template>

<script>

import { fetchPosts } from '../vuex/actions'

export default {
  vuex: {
    getters: {
      posts: state => state.posts
    },
    actions: {
      fetchPosts
    }
  },
  route: {
    data(transition) {
      // 送出 actions 後，還記得會回傳一個 Promise 嗎？
      // 這邊就可以根據 Promise 的結果來決定路由是否繼續
      // 如果沒有 catch 到任何錯誤或是 reject ，就是繼續
      // 有 catch 到就 abort() ，路由就會停止繼續
      return this.fetchPosts().catch(res => {
        transition.abort()
      })
    },
    // 這邊就是等待數據取得後才渲染組件關鍵，開啟 true 的話就會等到上面 data 處理完才會開始渲染
    waitForData: true
  }
}
</script>

【热门文章】