Vue3 组合式 API的简单应用

使用Vue3 最大的变化就是组合式API，通过ref,reactive,computed,等函数，可以将vue依赖的数据与逻辑出来。简单来讲，就是vue3可以直接写原来需要vuex封装的数据层。

举个例子：index页面的3个区域封装成3个组件：Top，List，Summary。三个组件都需要访问list数据。
以前需要引入vuex，通过manState的方式响应数据变化。

image.png

Vue3直接可以提取一个data文件。

import { ref, computed } from "vue";

let list = ref([]);

let listCount = computed(() => list.value.length);

const addItem = function(item) {
  list.value.push(item);
};

export { list, listCount, addItem };

l10.gif

List.vue
<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import { list } from "../data.js";

export default {
  name: "list",
  setup() {
    return { list };
  },
};
</script>

Top.vue
<template>
  <div>
    <button @click="addItem">Add Item</button>
  </div>
</template>

<script>
import { addItem } from "../data.js";

export default {
  name: "top",
  setup() {
    return {
      addItem,
    };
  },
};
</script>

Summary.vue
<template>
  <div>
      ListCount:  {{ listCount }}
  </div>
</template>

<script>
import { listCount } from "../data.js";

export default {
  name: "summary",
  setup() {
    return { listCount };
  },
};
</script>