>[success] # composition API -- VUEX 1. 可以通過 獲取`this.$store` 來進行調用里面提供數據對象 * **state**-- 保存數據狀態 * **mutations** -- 對`state `中的數據更改都是通過`mutations`中的方法操控，`Vuex `不提倡直接更改`state`中的數據 * **getters** -- 當我們要獲取`state`中的方法的時候從`getter`中取值 * **Action** -- 異步獲取請求參數賦值，他會操控`mutations`,再讓`mutations`給`state`賦值 * **module**-- store 分割成模塊（module）。每個模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊 >[info] ## 綜合案例 ~~~ // 創建vuex import { createStore } from "vuex"; const store = createStore({ state: () => { return { name: "wwww", age: 12, friends: [ { id: 111, name: "a", age: 20 }, { id: 112, name: "b", age: 30 }, { id: 113, name: "c", age: 25 }, ], }; }, getters: { // 第一個參數當前state getName(state) { return state.name; }, // 第一個參數當前state 第二個參數是getters getInfo(state, getters) { return state.age + getters.getName; }, // 通過返回一個函數達到 讓 getter 可以接收參數 getFriendById(state) { return function (id) { const friend = state.friends.find((item) => item.id === id); return friend; }; }, }, mutations: { // 第一個參數 state ,第二個參數調用傳入的值 changeName(state, payload) { state.name = payload; }, }, actions: { /** 處理函數總是接受 context 作為第一個參數，context 對象包含以下屬性 * state, // 等同于 `store.state`，若在模塊中則為局部狀態 * rootState, // 等同于 `store.state`，只存在于模塊中 * commit, // 等同于 `store.commit` * dispatch, // 等同于 `store.dispatch` * getters, // 等同于 `store.getters` * rootGetters // 等同于 `store.getters`，只存在于模塊中 */ incrementAction(context, payload) { // console.log(context.commit) // 用于提交mutation // console.log(context.getters) // getters // console.log(context.state) // state context.commit("changeName", payload); }, }, }); export default store; ~~~ >[danger] ##### 特殊說明 -- state 1. `composition Api` 使用方式比較多，但推薦直接使用 `toRefs` 即可 2. 想使用`mapState` 這類 由于其映射出來的對象，所有要獲取指定`key`對應的`function`，但要注意 `setup` 此時`this ` 指向問題，你需要手動指定`this`，否則執行失敗 * 執行效果圖  ~~~html <template> <div> {{ store.state.name }} {{ name }} {{ cname }} {{ tAname }} {{ tBname }} {{ rName }} </div> <button @click="changeState">changeState</button> </template> <script setup> import { computed, toRefs } from "vue"; import { useStore, mapState } from "vuex"; const store = useStore(); // 方法一 獲取 state 依次賦值 const name = store.state.name; // 非響應 // 方法二 使用計算屬性 const cname = computed(() => store.state.name); // 方法三使用 mapState 但需要自定義this 指向 const tAname = mapState(["name"]).name.apply({ $store: store }); // 非響應 const tBname = computed(mapState(["name"]).name.bind({ $store: store })); console.log(mapState(["name"])); // -----------最簡單的方法 toRefs 解構-------------- const { name: rName } = toRefs(store.state); // 強制改變state function changeState() { store.state.name = "新"; } </script> ~~~ * 如果非要使用 `mapState `執行可以封裝一個`hooks` ~~~ import { computed } from 'vue' import { useStore, mapState } from 'vuex' export default function useState(mapper) { const store = useStore() const stateFnsObj = mapState(mapper) const newState = {} Object.keys(stateFnsObj).forEach(key => { newState[key] = computed(stateFnsObj[key].bind({ $store: store })) }) return newState } ~~~ ~~~ // 使用 封裝的 useState,其實和toRefs 一樣 const { name, level } = useState(["name", "level"]) ~~~ >[danger] ##### 其他綜合使用 ~~~html <template> <div> {{ getName }} </div> <button @click="changeName('111')">changeState</button> <button @click="increment('111')">incrementAction</button> <button @click="mapActions('111')">mapActions</button> </template> <script setup> import { toRefs } from "vue"; import { useStore, mapMutations, mapActions } from "vuex"; const store = useStore(); const { getName } = toRefs(store.getters); // 方式 一 const changeName = (name) => store.commit("changeName", name); // 方式二 手動的映射和綁定 // const mutations = mapMutations(["changeName"]); // const newMutations = {}; // Object.keys(mutations).forEach((key) => { // newMutations[key] = mutations[key].bind({ $store: store }); // }); // const { changeName } = newMutations; // ------------ action ---------- // 1.使用默認的做法 function increment(name) { store.dispatch("incrementAction", name); } // 2.在setup中使用mapActions輔助函數 // const actions = mapActions(["incrementAction", "changeNameAction"]) // const newActions = {} // Object.keys(actions).forEach(key => { // newActions[key] = actions[key].bind({ $store: store }) // }) // const { incrementAction, changeNameAction } = newActions </script> ~~~