如何根据 vuex 中的状态切换视图？

Question

我有一个按钮<Button> Log me in! </Button>，我想根据我当前的 vuex 应用程序的状态更改它的 css 类。 （state.user 不为空）

编写此代码的正确方法是什么？

我可以在状态中创建一个字段，即该视图的类名，并在操作/突变中相应地更改它。但是我应该把这个逻辑放在更好的地方吗？由于这个字段完全依赖于组件，我认为它不应该“泄漏”到全局状态。

Answer 1

只需使用典型的对象绑定语法。

<button :class={someClass: !$store.state.user}>Log me in!</button>

或者在 Vuex 中定义一个 getter 并在你的类定义中使用它。

Answer 2

我认为正确的方法是使用计算函数并以这种方式绑定 v-show 指令。