vue3 Composition API使用示例教程

<script>
import { useStore } from "vuex";
import { getCurrentInstance } from 'vue'
export default {
  name: "ChildA",
  setup() {
       const instance = getCurrentInstance();
       console.log('instance--',instance);
    return {};
  },
};
</script>

<script>
import { useStore } from "vuex";
import { reactive, onMounted, toRef, toRefs } from 'vue'
export default {
  name: "ChildA",
  setup() {
    const store = useStore();
    const state = reactive({
      goods:[]
    });

    const getData = () => {
      store.dispatch("products/getProducts").then((res) => {
        state.goods = res
      });
    };
    const addData = () => {
      store.dispatch("products/setProducts");
      getData();
    };
    
    onMounted(() => {
      getData();
    });    
    
    //以toRef形式返回
    const goodsRef = toRef(state,'goods');
    return { goodsRef, addData };

     //以toRefs形式返回
    /* const goodsRefs = toRefs(state);
    return goodsRefs */
  },
};
</script>

<template>
  <div class="child-a">
          ChildA:
    <ul>
      <!-- 以toRefs形式返回直接取响应式对象属性 -->
      <!-- <li v-for="item in goods" :key="item.id">{{ item.name }}</li> -->

      <!-- 以toRef形式返回 -->
      <li v-for="item in goodsRef" :key="item.id">{{ item.name }}</li>
    </ul>

    <button @click="addData">ChildA-Add</button>
  </div>
</template>