nuxt.js ページ遷移時のstoreの値の変更について

Question

export default async ({ app,store }) => {
    app.router.afterEach((to, from) => {
      let page_name;
      page_name = to.name;

      switch(page_name){
        case "privacy" :
          console.log("privacy page");
          store.dispatch("changeSingleState", true);
          break;
        
        case "agreement" :
          console.log("agreement page。");
          store.dispatch("changeSingleState", true);
          break;

          case "index" :
            console.log("index page。");
            store.dispatch("changeSingleState", false);
            break;
      }
    });
  };

export const state = () =>({
    isActive: false,
    isWhite: false,
    isSinglePage: false
})

export const mutations = {
    setActiveState(state,value){
        state.isActive = value
    },
    changeHeaderWhite(state,value){
        state.isWhite = value
    },
    setSingleState(state,value){
        state.isSinglePage = value
        console.log(state.isSinglePage, '~~~~~~~')
    }
}
export const actions = {
    changeSingleState({commit},value){
        console.log(value,"aaaaaaaaaaaaa");
        commit("setSingleState",value)
    },
    changeActive({commit},value){
        commit("setActiveState",value)
    }
}

<a href="../#feature" v-if="singlePageState">
  <img src="/assets/img/navi.png" alt="">
</a>
<nuxt-link v-scroll-to="'#feature'" to="#feature" v-if="!singlePageState">
  <img src="/assets/img/navi.png" alt="">
</nuxt-link>

singlePageStateはtrueかfalseをstoreで管理しており、aタグかnuxt-linkを使うかの切り分けをv-ifで書いております。
問題は、
topから下層ページに遷移した時と、下層ページに直アクセスした際で、trueなのにfalseの部分が表示されたり、falseなのにtrueの条件部分が表示されたりします。
storeの値はconsoleで見ると問題なくtrueとfalse切り替わっているのですが、これはなぜでしょうか。

Comments

[FeLvi_zzz]

storeのisSinglePageはHTML内のsinglePageStateにどのように代入しているのでしょうか？

[okpk]

返信ありがとうございます。
data、computed、mountedそれぞれの書き方で
singlePageState = this.$store.state.isSinglePage
という感じで代入し試しましたが、結果は全て変わりませんでした。

また、v-ifに直接storeのstateを書いても初期表示と別ページからの遷移時でtrueとfalseの挙動がうまく動きませんでした。

v-if条件分岐に入る前に{{singlePageState}}の形式でtrueが表示されているのに、falseの<nuxt-link>の分岐に入るような感じです。。

Answer 1

厳密にタイミングが取れてないということで一旦解決にします。