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 thev-*
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