@xyzi/pinia v0.0.1

Pinia

简介

• 此为简版Pinia用于uniapp的vue3版本开发
• 保留了createPinia、defineStore、shouldHydrate、storeToRefs。
• 舍弃了TS及类型推导、vue2适配及相关API、调试插件、热加载等

Pinia官方地址

• 官方github
• 官方文档

注意

如有侵权请留言

Installation

yarn add pinia
# or with npm
npm install pinia

If you are using Vue 2, make sure to install latest @vue/composition-api:

npm install pinia @vue/composition-api

Usage

Install the plugin

Create a pinia (the root store) and pass it to app:

import { createPinia } from '@xyzi/pinia'

app.use(createPinia())

Create a Store

You can create as many stores as you want, and they should each exist in different files:

import { defineStore } from '@xyzi/pinia'

// main is the name of the store. It is unique across your application
// and will appear in devtools
export const useMainStore = defineStore('main', {
  // a function that returns a fresh state
  state: () => ({
    counter: 0,
    name: 'Eduardo',
  }),
  // optional getters
  getters: {
    // getters receive the state as first parameter
    doubleCount: (state) => state.counter * 2,
    // use getters in other getters
    doubleCountPlusOne(): number {
      return this.doubleCount + 1
    },
  },
  // optional actions
  actions: {
    reset() {
      // `this` is the store instance
      this.counter = 0
    },
  },
})

defineStore returns a function that has to be called to get access to the store:

import { useMainStore } from '@/stores/main'
import { storeToRefs } from 'pinia'

export default defineComponent({
  setup() {
    const main = useMainStore()

    // extract specific store properties
    const { counter, doubleCount } = storeToRefs(main)

    return {
      // gives access to the whole store in the template
      main,
      // gives access only to specific state or getter
      counter,
      doubleCount,
    }
  },
})