[TOC] > [pinia.vuejs.org](https://pinia.vuejs.org/zh/introduction.html#basic-example) ## Pinia 狀態管理推薦是使用 Pinia,而不是vuex ## 安裝 ``` yarn add pinia # 或者使用 npm npm install pinia ``` ## 語法 在組合式 API 中 * `ref()`就是`state`屬性 * `computed()`就是`getters` * `function()`就是`actions` ## 技巧 ### 全局通知 1. 如果是簡單結構,無需索引,則直接暴露對象 設置 ``` // store export const useUserInfoStore = defineStore('userInfo', () => { const user = ref({} as User.ReqUser); }) ``` 引用 ``` const store = useUserInfoStore(); const { user } = storeToRefs(store); ``` 2. 如果是hash 中的數據,則使用 computed 設置 ``` const selfUser = computed(() => { return users.value[userId()] ; // 輸出必須為 非ref 的值 }) ``` 引用 ``` const {user} = storeToRefs(userStore()); 設置為動態更新 ``` 3. 返回對象中,帶參數的響應式 設置 ``` const getUser = computed(() => { return (user_id: string) => { if (users.value[user_id]) { return users.value[user_id] } else { throw new RuntimeException(`not found the user_id=${user_id}`) } } }) ``` 引用 ``` const {getUser} =storeToRefs(useUsers()) // 測試 cong getUser 中獲取的值帶有響應式 getUser.value(props.user_id).user_id ```