pinia使用教程（vue3版本）

pinia使用教程（vue3版本）

1、安装教程

npm install pinia --save

官网地址：https://pinia.web3doc.top/getting-started.html

//在main.js中
import { createPinia } from 'pinia'

app.use(createPinia())

2、使用教程

//在src目录下，像vuex一样创建store文件夹，文件夹下面创建index.js
import { defineStore } from 'pinia'
//这个函数的第一个参数为他的id，这个id必须是唯一的
export const useMainStore = defineStore('main', {
    state: () => {
        return{
            count:0
        }
    },
    getters: {},
    actions: {
        increment() {
            this.count++
        }
    }
})

<template>
 	{{mainStore.count}}
	<button @click="mainFn">13</button>
</template>
<script setup>
import {useMainStore} from '@/pinia-store/index'
const mainStore = useMainStore()
//改变count的值
const mainFn = ()=>{
    //第一种方式
    mainStore.count++
    //第二种方式
    mainStore.increment()
    //第三种方式
    mainStore.$patch({
    	count : mainStore.count + 1
 	})
    //第四种方式
    mainStore.$patch( state =>{
   		state.count++
  	})
}
//重置状态
mainStore.$reset()
mainStore.$state = {
   count : 0
}
</script>

uni-app配置pinia

//在mian.js中的配置 uni-app vue3版本自带pinia不需要导入
import * as Pinia from 'pinia';
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  app.use(Pinia.createPinia());
  return {
    app,
	Pinia // 此处必须将 Pinia 返回
  }
}
//使用参照上面