使用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>
