vue3+vuex4 实现不同组件间数据共享

效果

实现

• 第一步：修改store/index.ts

import {createStore} from 'vuex'

export default createStore({
  state: {
    count: 1000  // 控制菜单展开与折叠
  },
  mutations: {// 同步方法
    add(state, he) { // 注册事件：唯一修改state.count值的方法
      state.count = state.count + he
      return state.count
    }
  },
  actions: {// 异步方法
    asyncAdd(context, he) { // 该方法需要通过dispatch()调用
      context.commit("add", he)  // 通过commit方法调用add
    }
  },
  modules: {}
})

• Header.vue

    


import {useStore} from "vuex";
export default {
  setup(): any {
    const store = useStore();
    function toggleSideBar() {
      store.dispatch("asyncAdd", 888);
    }
    return {
      store
    }
  }
}

• Aside.vue

  ------------ {{store.state.count}}-------------


import { useStore } from 'vuex'
export default {
  setup(): any {
    const store = useStore()
    return {
      store
    }
  }
}