2016-05-03 13 views
3

私は自分のプロジェクトでvue-jsとvuexを試しています。`.vue`コンポーネントの明示的呼び出しvuexアクションデタッチ/準備機能

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

Vue.use(Vuex); 

const state = { 
    user: {} 
}; 

const mutations = { 
    SET_CURRENT_USER (state, data) { 
     state.user = data; 
    } 
}; 

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

そして、私のactions.js

私はstore.jsを定義した

export const readCurrentUser = function({dispatch, state}) { 
    let api = require('../api/resources'); 
    api.User.get({ 
     action: 'current' 
    }).then(function(response) { 
     dispatch('SET_CURRENT_USER', response.data); 
    }); 
}; 

をそして、私のApp.vueコンポーネントでそう:

<template> 
    <a @click="readCurrentUser">read current user</a> 
</template> 

<script> 
    import store from '../vuex/store' 
    import { readCurrentUser } from '../vuex/actions' 

    export default { 
     replace: false, 
     store: store, 
     data: function() { 
      return { 
      }; 
     }, 
     vuex: { 
      actions: { 
       readCurrentUser: readCurrentUser 
      } 
     }, 
     attached: function() { 
      // !!!! HERE IS THE POINT !!!! 
      // How can I trigger `readCurrentUser` action here? 
     } 
    } 
</script> 

I上記の場合、​​をクリックすると、そのアクションはexpecとして実行されましたテッド。

しかし、私はアプリケーションが接続されるたびにアクショントリガーが欲しいです、どうすればいいですか?

答えて

3

最後に、解決策がとても簡単だとわかりました。

vuex.actionsメソッドが現在のvmオブジェクトに登録されているためです。

ので、呼び出し:

attached: function() { 
    this.readCurrentUser(); 
} 

ちょうど働きます!

関連する問題