在VUE3中使用Pinia

一、安装使用Pinia
安装下载

npm install pinia

main.js引入

import { createPinia } from 'pinia'

app.use(createPinia())

根目录新建store/index.js中写入

import { defineStore } from 'pinia'
export const useStore = defineStore('storeId', {
  state: () => {
    return {
      counter: 0,
    }
  },
  getters:{},
  actions:{}
})

组件使用

<script setup>
import { useStore } from '../store'
const store = useStore();
</script>

二、State
Pinia定义state数据

import { defineStore } from 'pinia'

export const useStore = defineStore('storeId', {  state: () => {
    return {
      counter: 0,
      name: 'Eduardo',
      isAdmin: true,
    }
  },
  getters:{},
  actions:{}
})

组件使用pinia的state数据

<template>
	<div>
		<h1>test</h1>
		{{ name }}
	</div>
</template>

<script setup>
import { useStore } from '../store'
const store = useStore();
let { name } = store;
</script>

组件修改pinia的state数据
本身pinia可以直接修改state数据，无需像vuex一样通过mutations才可以修改，但是上面写的let { name } = store;这种解构是不可以的，所以要换解构的方式

<template>
	<div>
		<h1>A组件</h1>
		{{ name }}
		<button @click='btn'>按钮</button>
	</div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useStore } from '../store'
const store = useStore();
let { name }  = storeToRefs(store);
const btn = ()=>{
	name.value = '123';
}
</script>