vue中怎么将后台返回权限列表的数据存进vuex中用到的页面用计算属性来拿这个权限列表

首先需要在Vuex中定义一个state来存储权限列表数据，例如：

state: {
  permissionList: []
}

然后在actions中发起异步请求获取权限列表数据，并将数据存储到state中：

actions: {
  getPermissionList({ commit }) {
    return axios.get('/api/permission').then(res => {
      commit('setPermissionList', res.data)
    })
  }
},
mutations: {
  setPermissionList(state, list) {
    state.permissionList = list
  }
}

接着，在需要使用权限列表的页面中，可以使用计算属性来获取state中的权限列表数据：

computed: {
  permissionList() {
    return this.$store.state.permissionList
  }
}

这样就可以在页面中直接使用`permissionList`来获取权限列表数据了。需要注意的是，如果权限列表数据在多个页面中被使用，可以考虑将其定义为全局的getter，以便在任何页面中都能方便地获取到。

相关问题

vue2.x中，将扁平的权限列表数据转换为树形结构的函数。

在 Vue 2.x 中，你可以使用以下方式将扁平的权限列表数据转换为树形结构的函数：

function transListToTreeData(list, parentId) {
  const treeData = [];
  
  // 遍历权限列表数据
  for (let i = 0; i < list.length; i++) {
    const item = list[i];
    
    // 如果当前权限的父级ID等于指定的父级ID
    if (item.parentId === parentId) {
      // 递归调用自身，查找当前权限的子级权限
      const children = transListToTreeData(list, item.id);
      
      // 将当前权限添加到树形数据中，并设置其子级权限
      treeData.push({
        ...item,
        children
      });
    }
  }
  
  return treeData;
}

这个函数接受两个参数：`list` 和 `parentId`。其中，`list` 是扁平的权限列表数据，`parentId` 是指定的父级ID，用于查找对应的子级权限。

函数的主要逻辑如下：
1. 创建一个空数组 `treeData`，用于存储转换后的树形结构数据。
2. 遍历权限列表数据。
3. 对于每个权限项，判断其父级ID是否等于指定的父级ID。
4. 如果相等，递归调用自身，并传入当前权限项的ID作为新的父级ID，以查找当前权限项的子级权限。
5. 将当前权限项添加到树形数据中，并设置其子级权限为递归调用的结果。
6. 返回转换后的树形数据 `treeData`。

通过这个函数，你可以将扁平的权限列表数据转换为树形结构的数据，便于在 Vue 组件中进行展示和操作。请注意，上述代码是一个示例，具体的实现可能需要根据你的权限列表数据结构进行调整。

vuex的计算属性_vue中vuex的五个属性和基本用法

Vuex是Vue.js应用程序开发的状态管理模式。它可以集中管理应用程序的所有组件的状态，并提供了一些工具来实现状态的更改和响应。Vuex包含五个核心属性，分别是state、getters、mutations、actions和modules。

1. state：状态对象，用于存储应用程序的所有状态数据。状态数据可以通过state属性中的getter方法访问。

2. getters：计算属性，用于派生状态数据并对其进行过滤、排序或转换。getters可以被其他getters调用，也可以在组件中直接访问。

3. mutations：用于修改应用程序的状态数据。mutations应该是同步的，只能通过commit方法来调用。

4. actions：用于处理异步操作和复杂的业务逻辑。actions可以调用mutations来修改状态，也可以通过dispatch方法来调用其他actions。

5. modules：用于将应用程序的状态数据模块化。每个模块都有自己的state、getters、mutations和actions，可以嵌套其他模块。

基本用法：

1. 创建store对象：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  }
})

export default store

2. 在组件中使用store：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount'])
  },
  methods: {
    ...mapActions(['incrementAsync', 'increment'])
  }
}
</script>