vue3+vuex 的 state 的 使用

 

<template>
  <div class="app">
    <h3> 在模板中直接使用(vue2-3都可用) </h3>
    姓名 : {{ $store.state.nameVuex }}
    等级 : {{ $store.state.levelVuex }}
    头像 : {{ $store.state.avtarURLVuex }}

    <h3>vue3的写法</h3>
    姓名 : {{ nameVuex }}
    等级 : {{ levelVuex }}
    头像 : {{ avtarURLVuex }}
  </div>
</template>


<script setup>
  import { toRefs } from 'vue';
  import { useStore } from 'vuex';
  const store = useStore()

  // 直接对 store.state 进行解构 => 不是响应式
  // 使用 toRefs 让其 响应式
  const {nameVuex,levelVuex,avtarURLVuex} = toRefs(store.state)
</script>