xianghongai / vscode-pinia-snippets

用于快捷编写 [Pinia](https://pinia.vuejs.org/) 代码片断。

Pinia Snippet (Visual Studio Code)

用于快捷编写 Pinia。

Quickly write Pinia code.

另外按需安装:

Also need to install :

• Vue Basic Snippets，包含 Vue 2 和 3 **用的 v-* 系列指令、import 组件、指令、服务之类的代码。 Contains code for the v-* family of directives, import components, directives, and services common to Vue 2 and 3.
• Vue 2 Snippets，参考 Vue 2 官方文档示例及测试用例源码。 Uses official Vue 2 examples and test cases.
• Vue 3 Snippets，参考 Vue 3 官方文档示例及测试用例源码。 Uses official Vue 3 examples and test cases.
• JavaScript Code Snippet，参考 MDN 文档。 Using MDN documentation.
• JavaScript Comment Snippet，参考 JSDOC、ESDOC 文档，用于便捷编写 JavaScript 注释。 Reference JSDOC, ESDOC documentation for easy writing of JavaScript comments.

因为 Vue 不同版本 API 的差异，将 2 和 3 的 Code Snippets 各自分开了。在项目中根据实际情况，在扩展中可以选择 Disable (Workspace)；如果觉得这样操作麻烦，可以在 “VS Code” 中安装 2 版本扩展，在 “VS Code - Insiders” 中安装 3 版本扩展。

Because of the difference in APIs between different versions of Vue, the Code Snippets for 2 and 3 are separated from each other. You can choose Disable (Workspace) in the extensions in your project; if you find it troublesome, you can install version 2 extensions in VS Code and version 3 extensions in "VS Code - Insiders".

---

Snippets

prefix	body	description
pinia, cp	import { createPinia } from 'pinia'; const pinia = createPinia(); app.use(pinia);	Create a pinia instance
pinia4vue2, cp4vue2	import { createPinia, PiniaVuePlugin } from 'pinia'; Vue.use(PiniaVuePlugin); const pinia = createPinia();	Create a pinia instance for Vue 2
defineStore, ds	import { defineStore } from 'pinia'; export const useFileNameStore = defineStore('file-name', () => { return { } });	Defining Stores - Composing
defineStore, dso	import { defineStore } from 'pinia'; export const useFileNameStore = defineStore('file-name', { state: () => ({ }), getters: { }, actions: { }, });	Defining Stores - Option
ims	import { useFeatureStore } from '@/stores/feature'; const featureStore = useFeatureStore();S	Import Store
imstr	import { storeToRefs } from 'pinia'; const { properties } = storeToRefs(store);	Import storeToRefs()
imms	import { mapState } from 'pinia'; ...mapState(useFeatureStore, ['state/getter']),	Import mapState
imma	import { mapActions } from 'pinia'; ...mapActions(useFeatureStore, ['actions']),	Import mapActions
immws	import { mapWritableState } from 'pinia'; ...mapWritableState(useFeatureStore, ['state/getter']),	Import mapWritableState
ms	...mapState(useFeatureStore, ['state/getter']),	Usage with the Options API - Without setup() - mapState()
ma	...mapActions(useFeatureStore, ['actions']),	Usage with the Options API - Without setup() - mapActions()
mws	...mapWritableState(useFeatureStore, ['state/getter']),	Usage with the Options API - Without setup() - mapWritableState()
store.$patch, sp	featureStore.$patch((state) => { });	Mutating the state: store.$patch
store.$subscribe, ss	featureStore.$subscribe((mutation, state) => { });	Subscribing to state: store.$subscribe
store.$onAction, sa	const unsubscribe = featureStore.$onAction( ({ name, store, args, after, onError }) => { after((result) => { }); onError((error) => { }); } );	Subscribing to actions: store.$onAction
store2composition , us	const featureStore = useFeatureStore();	Store @ Composition API, useFeatureStore
store2option, uso	setup() { const featureStore = useFeatureStore() return { featureStore } },	Store @ Options API, useFeatureStore

License 📃

MIT License

Donate