前言

　　前面介紹了vuex每個核心概念的知識點，可是具體在專案中如何把這些概念組合起來使用呢？本文來總結一下常見的使用方法和對應的專案結構。

正文

　　本文來以一個登入退出的功能來演示vuex在專案中的使用，登入之後儲存登入的token便於下一次傳送請求時將token放於請求頭中確認使用者的登入狀態，點選退出按鈕之後，傳送退出的介面，並把前面登入存的資料狀態全部清空。

　　一般的vue專案中vuex應該有單獨的store目錄，下面新建如下的目錄，這裡需要注意modules的配置。其目錄結構如下：

　　說明：上的目錄中 store用來對共享的狀態資料進行操作，其中store目錄下的index檔案向外暴露出該共享狀態，需要在main.js引入至vue例項，同時index檔案內部存放具體的狀態檔案。getters.js檔案主要用來宣告全域性的state的計算屬性，modules資料夾對各個模組進行分類，該資料夾下的index用於向外的store下的index.js暴露介面。user.js是對應的單獨的使用者登入退出的模組狀態。

　　a、提取出一個公共的store物件，用於儲存在多個元件中共享的狀態,建立一個store檔案，在裡面建立index.js。

　　b、將store物件放置在new Vue物件中，這樣可以保證在所有的元件中都可以使用到,然後將store掛載到vue例項中。

　　c、在其他元件中使用store物件中儲存的狀態即可。

　　1、main.js  引入該 vuex共享狀態資料,如下：

    import store from "./store";
    new Vue({
        components: { App },
        store,
        template: "<App/>",
    }).$mount(
 
"#app");

　　2、store/index.js

        import Vue from "vue";
        import Vuex from "vuex";
        import getters from './getters'
        import modules from "./modules";
        Vue.use(Vuex); //使用的時候注意在主程序中引入，並且註釋掉多程序共享資料
        export default new Vuex.Store({
            modules,
            getters,
        });
 

　　3、store/getters.js

        const getters = {
            isMoreAge: (state) => { // 計算屬性判斷是否成年
                return state.userInfo.age > 18
            }
        };
        export default getters;

　　4、store/modules/index.js

        import user from './user'
        const modules = {
            user
        }
        export default modules

　　5、store/modules/user.js

        import Vue from "vue";
        import { login, logout } from "../../api/login";//引入介面
        const user = {
            state: {
                token: "",
                userInfo:{},
            },
            mutations: {
                SET_TOKEN: (state, token) => {
                    state.token = token;
                },
                SET_USER: (state, userInfo) => {
                    state.userInfo = userInfo;
                },
            },
            actions: {
                // 登入
                Login({ commit }, userInfo) {
                    return new Promise((resolve, reject) => {
                        login(userInfo)
                        .then((response) => {
                            if (response.code == "200") {
                                commit("SET_TOKEN", response.data);
                                commit("SET_USER", response.userInfo);
                                resolve(response);
                            } else {
                                reject(response);
                            }
                        })
                        .catch((error) => {
                            reject(error);
                        });
                    });
                },
                // 退出
                Logout({ commit, state }) {
                    return new Promise((resolve, reject) => {
                        logout()
                        .then((response) => {
                            if (response.code == "200") {
                                commit("SET_TOKEN", "");
                                resolve(response);
                            } else {
                                reject(response);
                            }
                        })
                        .catch(() => {
                            reject();
                        });
                    });
                },
            },
        };
        export default user;

　　6、使用：某vue元件中:

    <template>
        <div>
            {{ this.$store.state.token}}
            {{ isMoreAge }}
            <button @click="toLogin">登入</button>
            <button @click="toExit">退出</button>
        </div>
    </template>
    <script>
        import { mapActions } from "vuex";
        export default {
            computed:{
                isMoreAge() { // 這裡使用getter計算屬性
                return  this.$store.getters.isMoreAge
                },
            },
            methods: {
                ...mapActions(["Login", "Logout"]),
                toLogin() {
                this.Login(params)
                    .then(() => {
                    // ...
                    })
                },
                toExit() {
                this.Logout(params)
                    .then(() => {
                    // ...
                    })
                },
            },
        };
    </script>

寫在最後

　　以上就是本文的全部內容，希望給讀者帶來些許的幫助和進步，方便的話點個關注，小白的成長之路會持續更新一些工作中常見的問題和技術點。