使用Vue3 最大的變化就是組合式API练湿，通過ref,reactive,computed,等函數(shù)，可以將vue依賴的數(shù)據(jù)與邏輯出來浪藻。簡單來講狈谊，就是vue3可以直接寫原來需要vuex封裝的數(shù)據(jù)層。
舉個例子：index頁面的3個區(qū)域封裝成3個組件：Top卢厂，List乾蓬，Summary。三個組件都需要訪問list數(shù)據(jù)慎恒。
以前需要引入vuex任内，通過manState的方式響應(yīng)數(shù)據(jù)變化。
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>
