Vuexゲッター-性質障害VUE-ルータを使用して - 彼らは

Question

まず反応することに失敗し、Vueのルータを使用してstore.js

const state = { 
    isLogin: false 
} 

const mutations = { 
    login(state, userid){ 
    state.userid = userid; 
    } 
} 

export default { 
    state, 
    mutations 
} 

のためのモジュールの一つである、user.jsがあり、私は、Appコンポーネントを作成しました輸入されたstore.js。
そして、コンポーネントlogin.vueとなります。コードの一部を以下に示します。

<script>  
export default { 
    vuex: { 
    actions: { 
     login // this action changes the state of 
       // isLogin by dispatch `login` mutation 
    } 
    }, 

    methods: { 
    btnClick(){ 
     // here calls the login action 
    } 
    } 
} 
</script> 

私はこの方法btnClickは、このコンポーネントで作業できることに気づきました。 store.state.user.isLoginが変更されました。

btnClickが login.vueに切り替え

<template> 
... 
    <a 
    v-if="isLogin" 
    v-link="'#'"> 
    ... 
    </a> 
... 
</template> 

<script> 
// import something 
export default { 
    vuex: { 
     getters: { 
     isLogin: ({ user }) => user.isLogin 
     } 
    } 
} 
</script> 

、isLogin変更：

しかし、ここではisLogin状態を聞いて別のコンポーネントa.vueです。しかし、ゲッターisLoginのa.vueが変更されたようですが、<a>が表示されないため、<a>のv-ifは反応できませんでした。

子コンポーネントにstoreが注入されているかどうかをテストしようとしましたが、結果は成功しました。また、gettersの代わりにcomputedを使用して、isLoginを聴いてみましたが、どちらも反応しませんでした。 watch属性にisLoginを追加すると、監視に失敗しました。

私が確信していることが1つあります - Vue.use(Vuex)は見逃せません。

問題を引き起こしたのがVue-routerかどうか疑問に思っていました。
そして、誰もがvue-routerとvuexについて質問をしていないようだ...

Answer 1

（ユーザーを認証している場合、私はあなたがHTTP要求を作っていることを前提と）私はvue-routerとvuexとvue-resourceを使用していますし、それだけで動作します良い。

あなたの問題はゲッター宣言だと思います。 Gettersはstoreオブジェクト内にstateを受け取り、ストア宣言でisLoginオプションがuserのプロパティであるとは表示されません。私はあなたのゲッターをこれに変更します。

vuex: { 
    getters: { 
    isLogin: state => state.isLogin 
    } 
} 

Answer 2

あなたはどこにでもisLoginを更新していますか？ useridというstateの存在しないプロパティを設定し、どこでもstate.isLoginを設定しないで、ユーザーにログインしています。私はその宣言されていないプロパティを設定するのがうまくいくかどうか分からず、一般的にVueでは変数を最初から宣言して応答する必要があります。次のようになります。

const state = { 
    isLogin: false, 
    userid:0 
} 

const mutations = { 
    login(state, userid){ 
    state.userid = userid; 
    state.isLogin = true; 
    } 
} 

Answer 3

ジェフは、私の問題のために、私はまた、モジュールを作ると言うので、私たちは、あなたがモジュラーVuexビルドを行うときのように、私が思うに、この state.user.isLogin