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

GitHub

View Github