>[success] # Option 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] ## 綜合案例 1. 正常使用是通過`this.$store` 去調用對應模塊中取出數據 2. `vuex `也提供一些便捷方法**mapGetters, mapState, mapMutations, mapActions** * 注冊 ~~~ // 創建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; ~~~ * 使用 ~~~html <template> <div>{{ getName }} -- {{ getInfo }} -- {{ getFriendById(111) }}</div> <div>{{ cgetName }}</div> <button @click="mutations">觸發mutations</button> <button @click="changeName('語法糖')">觸發mutations 語法糖</button> <button @click="actions">Actions</button> <button @click="incrementAction('Actions')">觸發Actions 語法糖</button> </template> <script> import { mapGetters, mapState, mapMutations, mapActions } from "vuex"; export default { computed: { ...mapState([ // 映射 this.name 為 store.state.name "name", ]), ...mapState({ age: (state) => state.age, nameAlias: "name", //傳字符串參數 'nameAlias' 等同于 `state => state.name` }), //---------------分割線 ------------ ...mapGetters(["getName", "getInfo"]), ...mapGetters(["getFriendById"]), ...mapGetters({ // 把 `this.zgetName` 映射為 `this.$store.getters.getName` zgetName: "getName", }), cgetName() { return this.$store.getters.getName; }, }, methods: { mutations() { this.$store.commit("changeName", "新名字"); }, ...mapMutations(["changeName"]), // `this.changeName(amount)` 映射為 `this.$store.commit('changeName', amount)` //---------------分割線 ------------ actions() { this.$store.dispatch("incrementAction", "actions"); }, ...mapActions(["incrementAction"]), // `this.incrementAction(amount)` 映射為 `this.$store.dispatch('incrementAction', amount)` }, }; </script> ~~~