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

vue3使用computed获取vuex里数据

不再是vue2.0里什么mapGetter,mapState那些复杂的获取方式，

vue3.0里直接使用computed就可以调用vuex里的数据了。喜大普奔。

同时注意，一点，不可以直接使用useStore()方法里的state对象，因为在输出useStore方法的数据中，state是浅灰色的。

浅灰色只可看到，但是不可以直接使用。

如图：

<template>
<div>{{dataList}}</div>

</template>
<script>

import { defineComponent, ref, Reactive, toRefs, computed } from "vue";
import { useStore } from 'vuex'
// computed 计算属性
export default defineComponent({
  name: "home",

  setup(props, ctx) {
    let store = useStore()
    // 因为store里state是浅灰色的，所以不能直接使用，若要使用store.state.dataList需要computed来调用
    console.log(store)
    let dataList = computed(()=>{
      return store.state.dataList
    })
    console.log(dataList)
   return {
     store,
     dataList
   }
  },
});
</script>
<style scoped lang="sCSS">
</style>

vue3 简单使用vuex

mutations用于更变store中的数据（同步）

如何调用mutations中数据

vue3中取vuex里的数据 需要用 computed获取

使用store.commit(“add”) 来触发vuex里的mutations方法

触发mutations时传递参数：store.commit(“addN”,2) 通过第二个参数

使用action触发某个mutation

使用dispatch

如何使用getters

getter用于对store中的数据进行加工处理形成的新的数据

不会修改store中的原数据 它只起到一个包装器的作用 将store中的数据变一种形式返回出来

1.getter可以对store中已有的数据加工处理之后形成新的数据，类似vue的计算属性

2.store中数据发生改变 getter中的数据也会跟着变化

用计算属性可以获取vuex中的getters中的数据

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。