为什么状态对组件可见？
why is state visible to components?
据我了解，vuex的重点是保证状态的一致性，仅通过mutations/actions/getters将其暴露给组件。
但是，组件可以直接操作 $store.state 而无需使用 mutations/actions - 可能导致状态不一致。
为什么直接暴露vuex状态？
使用突变/动作/getters 等是建议的最佳实践，但并不意味着必须 遵循。
可能您只是想从状态中读取一个值，此时为其编写 getter 可能有点矫枉过正。
我个人总是尝试使用操作/getters 来保持一致，因为当你开始在没有集中式系统的情况下改变状态时它会变得混乱。
例如，如果您在该州有一个 user 模块。您可能会想只需要用户名 $store.state.user.username 但我总是更喜欢通过 getUser 公开用户并通过 user.username.
在组件上访问它
能够直接访问状态的亲是手表：
watch: {
'$store.state.user' (to, from) {
console.log('I changed!')
}
}
这将使您知道用户状态何时发生变化，但同样，如果您使用 $this.$store.dispatch('setUser', myUser)，您可以在操作中执行相同的操作。
我认为这里的关键是保持一致，选择一种方法并使用它，但始终建议遵循最佳实践。
据我了解，vuex的重点是保证状态的一致性，仅通过mutations/actions/getters将其暴露给组件。
但是，组件可以直接操作 $store.state 而无需使用 mutations/actions - 可能导致状态不一致。
为什么直接暴露vuex状态？
使用突变/动作/getters 等是建议的最佳实践，但并不意味着必须 遵循。
可能您只是想从状态中读取一个值，此时为其编写 getter 可能有点矫枉过正。
我个人总是尝试使用操作/getters 来保持一致，因为当你开始在没有集中式系统的情况下改变状态时它会变得混乱。
例如，如果您在该州有一个 user 模块。您可能会想只需要用户名 $store.state.user.username 但我总是更喜欢通过 getUser 公开用户并通过 user.username.
能够直接访问状态的亲是手表：
watch: {
'$store.state.user' (to, from) {
console.log('I changed!')
}
}
这将使您知道用户状态何时发生变化，但同样，如果您使用 $this.$store.dispatch('setUser', myUser)，您可以在操作中执行相同的操作。
我认为这里的关键是保持一致，选择一种方法并使用它，但始终建议遵循最佳实践。