使用pinia定义store的state属性和actions方法重名导致调用时出现is not a function异常

目录

问题现象

解决方法

---

问题现象

一个很低级的错误。不过表现的很奇怪。直接跳转到这个页面时会提示下面的错误，但是按F5刷新页面，又可以调用actions中的方法获取到服务端的数据​

store的定义如下。state的属性和actions的方法都是permissions​

export const UserStore=defineStore('user',{
    state:()=>{
        return{
            permissions:null,
        }
    },

    actions:{
        
        async permissions(userData){
            try{
                const permissionResp=await apiList.permissions(userData)
                const result=JSON.parse(permissionResp)
                if(result.code===200){
                    this.permissions=result.permissions
                }
                return result
            }catch(e){
                console.log(e)

            }
        },
})

页面调用如下：​

<template>
<el-form-item label="权限">
          <el-transfer
              v-model="userGroupForm.selectedPermisssion"
              filterable
              :filter-method="filterMethod"
              filter-placeholder="请输入搜索内容"
              :data="data"
              :titles="['可选权限', '已选权限']"
              :key="isUpdated"
          />
</template>

<script setup>
const isUpdated = ref(false)
let data = reactive([])

const getAllPermissons = (async () => {
  const curUserName = JSON.parse(sessionStorage.getItem('userInfo')).username

  const permissionResp = await userStore.permissions({username:curUserName})
  if (permissionResp) {
    const retCode = permissionResp.code
    if (retCode === 200) {

      data = generateData(permissionResp.permissions)
      isUpdated.value=!isUpdated.value
    } else {
      console.log(permissionResp.msg)
    }
  }
})



onMounted(() => {
  getAllPermissons()

})

</script>

解决方法

把actions中的方法改个名称即可，例如getPermissions

​

​