将侧栏菜单数据存储进vuex

zuozhengqing

2023-12-20 15bcbd44b6a3b2ec34092bc5ed3e213fa9c55de4

将侧栏菜单数据存储进vuex

 src/components/layout/components/appsidebar/index.vue

@@ -25,40 +25,25 @@
          <el-menu-item v-for="itm in item.children" :key="itm.id" :index="itm.path">{{ itm.title }}</el-menu-item>
        </el-submenu>
      </el-menu>
      <!-- <el-empty v-if="!this.menus"  description="没有侧栏菜单"></el-empty> -->
    </div>
  </div>
</template>

<script>
import { getMenuTreeByRole } from "@/api/menus/index"
import { mapMutations } from "vuex"
export default {
  name: "AppSidebar",
  props: {},
  data() {
    return {
      menus: []
      menus: this.$store.state.menus
    }
  },
  watch: {},
  created() {
    this.initNavMenu()
    this.getMenuTreeByRole()
  },
  computed: {
    // ...mapState(['menus']),
  },
  methods: {
    ...mapMutations(["setMenus"]),
    getMenuTreeByRole() {
      getMenuTreeByRole().then((res) => {
        res.data.list.map((item) => {
          if (item.systemType === 3) {
            this.menus = item.menus
          }
        })
      })
    },
    // 监听路由
    initNavMenu() {
      // console.log(this.$route.name)

 src/router/index.js

@@ -7,6 +7,7 @@
import warehouseManageRouter from "./warehouseManage/index.js" // 仓库管理
import reportRouter from "./report/index.js" // 报表
import {getMenuTreeByRole} from "@/api/menus/index"
import store from '@/store/index.js'; 

Vue.use(Router)
const login = (resolve) => require(["@/views/other/login/index"], resolve)
@@ -130,6 +131,8 @@
    };
    const foundObject = res.data.list.find(obj => obj.systemType === 3);
    if (foundObject) {
      // 存储进vuex
      store.commit('setMenus', foundObject.menus); 
      foundObject.menus.forEach(item => {
        const nextPath = item.children.find(obj => obj.path === routePath);
        if (nextPath) {

 src/views/operate/inventoryAdjustment/inventoryAdjustmentHistory.vue

@@ -145,7 +145,7 @@
              from: item.fromLocation.name,
              to: item.toLocation.name,
              productName: product.name,
              amount: product.amount,
              amount: item.details[0].amount,
              unit: product.unit
            }
          })