pinia-decorator is a JavaScript library that simplifies the integration of Pinia stores with Vue class-style components using the stage 3 proposal of JavaScript decorators. In other words, it provides functionality similar to the vuex-class and pinia-class library.
This library was inspired by vuex-class and pinia-class but with a few key differences:
- It is implemented in pure JavaScript and does not require TypeScript support.
- It supports the Vue 3.
- It supports the JavaScript-based class-style Vue components using vue3-class-component, while pinia-class primarily targets TypeScript-based class-style Vue components using vue-facing-decorator.
You can install pinia-decorator via npm or yarn:
npm install @haixing_hu/pinia-decorator
or
yarn add @haixing_hu/pinia-decorator
pinia-decorator provides the following decorators for your [Vue 3 class-style components]:
-
@State
: Used to inject a read-only state from a Pinia store. -
@WritableState
: Used to inject a writable state from a Pinia store. -
@Getter
: Used to inject a getter from a Pinia store. -
@Action
: Used to inject an action from a Pinia store. -
@Store
: Used to inject the entire Pinia store.
The @State decorator is used to inject read-only state from a Pinia store into Vue class-style components. It allows you to access and use the state properties of the Pinia store within your component.
The syntax of the @State
decorator is as follows:
@State(store: Object, stateName?: string)
-
store
(required): The injected Pinia store object defined using thedefineStore()
function from Pinia. -
stateName
(optional): The name of the injected state of the store. If not provided, the decorator uses the decorated field name as the injected state name.
The @WritableState
decorator is similar to @State
, but it allows you to
inject a writable state from a Pinia store into a Vue class-style component.
This means you can both read and modify the state properties.
The syntax of the @State
decorator is as follows:
@WritableState(store: Object, stateName?: string)
-
store
(required): The injected Pinia store object defined using thedefineStore()
function from Pinia. -
stateName
(optional): The name of the injected state of the store. If not provided, the decorator uses the decorated field name as the injected state name.
The @Getter
decorator is used to inject a getter from a Pinia store into a
Vue class-style component. It allows you to call getter functions from the
store within your component.
The syntax of the @Getter
decorator is as follows:
@Getter(store: Object, getterName?: string)
-
store
(required): The injected Pinia store object defined using thedefineStore()
function from Pinia. -
getterName
(optional): The name of the injected getter of the store. If not provided, the decorator uses the decorated field name as the injected getter name.
The @Action
decorator is used to inject an action from a Pinia store into a
Vue class-style component. It allows you to call action functions from the store
within your component.
The syntax of the @Action
decorator is as follows:
@Action(store: Object, actionName?: string)
-
store
(required): The injected Pinia store object defined using thedefineStore()
function from Pinia. -
actionName
(optional): The name of the injected action of the store. If not provided, the decorator uses the decorated field name as the injected action name.
The @Store
decorator is used to inject the entire Pinia store into a Vue
class-style component. It allows you to access all the state, getters, and
actions of the store.
The syntax of the @Store
decorator is as follows:
@Store(store: Object)
-
store
(required): The Pinia store object defined using thedefineStore()
function from Pinia.
Here's a simple example of how to use these decorators in your Vue component:
import { Component, toVue } from '@haixing_hu/vue3-class-component';
import { State, WritableState, Getter, Action, Store } from '@haixing_hu/pinia-decorator';
import { useMyStore } from './my-pinia-store-module';
@Component
export class MyComponent extends Vue {
@State(useMyStore)
myValue;
@State(useMyStore, 'message')
myMessage;
@Getter(useMyStore)
myGetter
@Getter(useMyStore, 'count')
myCountGetter
@Action(useMyStore)
fetchData;
@Action(useMyStore, 'sayMessage')
mySayMessage;
@Store(useMyStore)
store;
someOtherMessage = 'Hello World!';
callSayMessage() {
console.log('MyComponent.callSayMessage');
this.mySayMessage(this.myMessage);
}
}
export default toVue(MyComponent);
For more details, check the following demo projects:
If you find any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request to the GitHub repository.
We welcome your contributions and feedback!
pinia-decorator is distributed under the Apache 2.0 license. See the LICENSE file for more details.