選擇後會自動跳轉頁面
10-1
拆分 Vuex
- 若架構變大時，可以將 Vuex 項目都獨立出來
import { createStore } from "vuex";
import state from "./state.js";
import actions from "./actions.js";
import mutations from "./mutations.js";
import getters from "./getters.js";
import Auth from "./Auth";
export default createStore({
state,
actions,
mutations,
getters,
modules: {
Auth,
},
});
- \src\store\state.js
export default {
isOpen: false,
};
- \src\store\actions.js
export default {
handOpenState(context) {
const isOpen = !context.state.isOpen;
context.commit("OpenState", isOpen);
},
};
- \src\store\mutations.js
export default {
OpenState(state, payload) {
state.isOpen = payload;
},
};
- \src\store\getters.js
export default {
isOpen(state) {
return state.isOpen;
},
};
-
選擇後會自動跳轉頁面
10. Vuex 資料傳遞
