状态管理
作为前端的vue开发管理，怎么会能缺失状态管理呢。还是要先推荐下: pinia
pinia
项目已集成 pinia ，提供状态管理的能力，封装一些胶水代码，可以直接定义 store 使用。 下面使用setup方式定义的例子:
// 文件地址：src/stores/testStore.js
import { defineStore } from 'pinia'
import { ref } from 'vue'
export const useTestStore = defineStore('testStore', () => {
const showDiv = ref(false)
const temperature = ref(0)
function setShowDiv (show) {
showDiv.value = show
}
function setTemperature (v) {
temperature.value = v
}
//导出参数
return { showDiv, temperature, setShowDiv, setTemperature }
})
下面是使用 刚定义的testStore 例子:
<script setup lang="ts">
import { useTestStore } from 'src/stores/testStore'
const testStore = useTestStore()
// 拿参数
console.log(testStore.showDiv.value,testStore.temperature.value)
// 直接设置参数
testStore.$patch({ showDiv: true })
testStore.$patch({ temperature: 10 })
// 调用函数
testStore.setShowDiv(false)
testStore.setTemperature(10)
</script>
vuex
WARNING
vue3+ 官方推荐使用pinia，不在推荐使用 vuex，所以本项目中没有直接集成。
如果项目限制要求必须使用vuex时，也可以跳转这里，集成的也很体面巴士：@fesjs/plugin-vuex