Vue.JS 和 VueX - 在创建函数中提交后绑定 css 类的问题 - 使用 SSR答案

【问题标题】：Vue.JS and VueX - problem with bind css class after commit in created function - using SSRVue.JS 和 VueX - 在创建函数中提交后绑定 css 类的问题 - 使用 SSR
【发布时间】：2019-09-08 02:47:12
【问题描述】：

我刚刚设置了带有突变的新 vuex 变量。我更改了组件中“已创建”的 vue.js 函数的变量并且它有效。我有这个变量的值“true”但是当我尝试在某些父组件中绑定类时它不起作用。

父组件：

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

在挂载的函数console.log中显示“真”值。

SSR - INITIAL_STATE 在源代码中为此显示值为 true。

当我在同一小节中的挂载函数处提交变量值时 - 它已添加类，但 SSR 得到此变量的错误值...

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

尝试使用如下 getter 的计算属性

<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
        }
     }
})

【讨论】：

【解决方案2】：

我认为它不会起作用。主 app.vue 正在渲染，如果我们想要这个变量，我们需要用所有子组件重新渲染整个组件，这是无法完成的......

【讨论】：