Vue.JS и VueX - проблема с классом bind css после коммита в созданной функции - с использованием SSR

Question

Я только что установил новую переменную vuex с мутацией.Я изменяю переменную в «созданной» функции vue.js в компоненте, и она работает.У меня есть значение "true" этой переменной, но когда я пытаюсь связать класс в некотором родительском компоненте, он не работает.

Родительский компонент:

<div class="subsections" :class="{'portfolio-page': this.$store.state.portfolioPages}">

В смонтированной функции console.log показывает «истинное» значение.

SSR - INITIAL_STATE в исходном коде отображаемое значение true для этого.

Когда я фиксирую значение переменной всмонтированная функция в том же подразделе - это добавленный класс, но SSR получил ложное значение этой переменной ...

Answer 1

Попробуйте с вычисляемым свойством с получателями, как показано ниже

<div class="subsections" :class="{'portfolio-page': portfolioPages}">

<script>
new Vue({
   el : '#app',
   data:{
      ...
   },
   methods:{
      ...
   },
   computed:{
      portfolioPages(){
         return this.$store.getters.portfolioPages
      }
   }
})

<script>

И обновите свой код также в vuex (store.js)

const store = new Vuex.Store({
     state: {
        portfolio: 'lorem ipsum'
     },
     getters: {
        portfolioPages: state => {
           return state.portfolio
        }
     }
})

Answer 2

Я думаю, что это не сработает. Основным app.vue был рендеринг, и если нам нужна эта переменная, нам нужно перерисовать весь компонент со всеми подкомпонентами, это невозможно сделать ...