利用vuex進行組件之間傳遞參數

記一次vue學習筆記（第一次寫博客）

目的：
通過collapsed參數控制 ant-design layout的菜單收起和打開
問題：
把layout 拆分多個組件後，組件之間的參數傳遞，嘗試過用$emit和props,感覺不太理想
查了好多資料，最後決定用vuex

• 在項目中創建一個store目錄
• 
  index.tx內容：

import Vue from 'vue'
import Vuex from 'vuex'
import layout from "@/store/modules/layout/layout";


Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'

const store = new Vuex.Store({
        modules: {
            layout
        },
        strict: debug

    })
export default store

store中layout 的內容

const state = {
    collapsed: false
}

const actions = {
    setCollapsed(context:any,value:boolean){
        context.commit('setCollapsed',value)
    }
}

const mutations = {
//修改值
    setCollapsed(state: any, value: boolean) {
        state.collapsed = value
    }
}
const getters = {
    getCollapsed(state:any){
       return  state.collapsed
    }
}
export default {
    state,
    actions,
    mutations,
    getters
}

組件A的內容（只寫了js代碼）

//。。。。省略部分代碼
   <a-icon
                    class="trigger"
                    :type="collapsed ? 'menu-unfold' : 'menu-fold'"
                    @click="()=> collapsed = !collapsed"
            />
 //。。。。省略部分代碼
<script>
    export default {
        name: "Header",
        computed:{//利用計算屬性獲取和修改store中的值
            collapsed:{
                get(){
                    return this.$store.getters.getCollapsed
                },
                set(){
                    this.$store.dispatch('setCollapsed',!this.collapsed)
                }
            },
        },
    }
</script>

組件B的內容（只寫了js代碼）

//。。。。省略部分代碼
    <a-layout-sider
            :trigger="null"
            collapsible
            v-model="collapsed"
            breakpoint="lg"

    >
    //。。。。省略部分代碼
<script>

    export default {
        name: "Sider",
        computed:{
            collapsed:{
                get(){
                    return this.$store.getters.getCollapsed
                },
                set(){
                    this.$store.dispatch('setCollapsed',!this.collapsed)
                }
            }
        },
    }
</script>

心得：
本人寫後端的，剛學vue，沒什麼前端基礎（如果jq算的話當我沒說），感覺這個vue是挺神奇的，總的來說 還是挺難的。