利用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是挺神奇的，总的来说 还是挺难的。

标签：layout,collapsed,setCollapsed,state,参数,组件,const,vuex,store
来源： https://blog.csdn.net/qq_36456875/article/details/100604244