I'm currently facing an issue with integrating @casl/ability and Vue 3 with Pinia. I'm unsure of how to make it work seamlessly.
Here is a snippet from my app.js:
import { createApp } from "vue"
const app = createApp({})
// pinetree
import pinetree from "./store"
app.use(pinetree)
// casl
import { abilitiesPlugin } from "@casl/vue"
import ability from "./cacl/ability"
app.use(abilitiesPlugin, ability, {
useGlobalProperties: true
})
// ...
app.mount('#app')
This is what my ability.js file looks like:
import { defineAbility } from "@casl/ability"
import { useMainStore } from "../store/main"
const customAbility = defineAbility((can, cannot) => {
const store = useMainStore()
if (store.user.role === "admin") {
can("read", "Post")
}
// ...
})
export default customAbility
An error message keeps popping up while trying to set this up: https://i.sstatic.net/7xYNe.png
I've referred to Pinia's documentation on Using a store outside of a component, but there seems to be something amiss in my implementation. (P.S. The Pinia setup works fine elsewhere in my project; just need guidance on getting it right here.)