vue3.0如何使用computed来获取vuex里数据

下面是一份Vue3.0如何使用computed来获取Vuex里数据的攻略：

1. 简介

在使用Vue的过程中，经常遇到需要自动计算属性的情况，而Vuex作为Vue的全局状态管理工具，也经常用于存储应用程序的状态。在Vue3.0及以上版本中，可以使用computed选项来获取Vuex里的数据，并自动计算属性，非常方便。下面将为大家详细介绍vue3.0如何使用computed来获取vuex里的数据。

2. 示例

<template>
  <div>
    <p>当前计数器的值为：{{ count }}</p>
    <button @click="increaseCount">增加计数器的值</button>
  </div>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'

export default {
  name: 'MyComponent',
  setup() {
    const store = useStore()

    const count = computed(() => {
      return store.state.count // 获取store里的count值，自动计算
    })

    const increaseCount = () => {
      store.commit('increaseCount') // 提交mutations改变count值
    }

    return {
      count,
      increaseCount
    }
  }
}
</script>

在这个例子中，我们在setup函数中获取了Vuex store实例，使用computed选项来获取了store里的count值，并自动计算。在increaseCount函数中，提交mutations来改变count值。这样做的好处是能够让我们的数据与视图保持同步，提高开发效率。

另一个例子：

<template>
  <div>
    <p>{{ fullName }}</p>    
  </div>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'

export default {
  name: 'MyComponent',
  setup() {
    const store = useStore()

    const fullName = computed(() => {
      return store.state.firstName + ' ' + store.state.lastName // 计算前后缀拼接
    })

    return {
      fullName
    }
  }
}
</script>

在这个例子中，我们使用了两个state，一个存储firstName，一个存储lastName，使用computed选项来计算出fullName，返回拼接后的字符串。这个例子就是两个state的拼接计算而得到了一个新的结果，非常适合用于文本组合等场景。

3. 结语

Vue3.0通过computed选项实现了自动计算属性，并与Vuex结合起来，让数据与视图保持同步，提高开发效率。以上就是vue3.0如何使用computed来获取vuex里的数据的攻略，希望对大家有所帮助。