A very simple wrapper of pinia to try difference API
pinia-dx
Pinia DX improvement experiment (Composition API Only).
This is a very simple wrapper of pinia to try difference API.
import { reactive, toRefs } from 'vue'
- import { defineStore } from 'pinia'
+ import { defineStore } from 'pinia-dx'
- export const useUserStore = defineStore('user', () => {
+ export const userStore = defineStore(() => {
const state = reactive({
name: 'Eduardo',
/** @type {boolean} */
isAdmin: true,
})
return {
...toRefs(state),
login,
logout
}
async function login(user, password) {
// ...
}
function logout() {
// ...
}
})
In this API, defineStore is not support for SSR, if use SSR, you need to use defineSSRStore('user', () => ...) for replacement.
<script setup>
- import { useUserStore } from './stores/user'
+ import { userStore } from './stores/user'
- const user = useUserStore()
// ...
await user.login('user', 'password')
console.log(user.name, user.isAdmin)
</script>
Example code modify from https://codesandbox.io/s/github/posva/pinia-vue-3-demo-codesandbox