Vue3中使用pinia的示例代码

import { defineStore } from 'pinia' //引入pinia
 
//这里官网是单独导出  是可以写成默认导出的  官方的解释为大家一起约定仓库用use打头的单词 固定统一小仓库的名字不易混乱
export const useCar=defineStore("test",{ 
	state: () =>{
		return  ({
			msg:"这是pinia的数据",
			name:"小狮子",
			age:18
			}) //为了避免出错，返回的值用()包起来
	} 
})

import { createApp } from 'vue'
import App from './App.vue'
 
const app=createApp(App)
import { createPinia } from 'pinia' //引入pinia
app.use(createPinia())
 
app.mount('#app') 

<template>
	<h1>aaa--{{store.msg}}----{{store.name}}--{{store.age}}</h1>
	<button @click="change1">修改store.name</button>
	<router-view></router-view>
	
</template>
 
<script setup>
	import {useCar} from "../store/index.js" //将之前配置的pinia文件夹中的index.js文件引入
	let store=useCar() //接收
	 console.log(store)
 
	let change1=()=>{
		store.name="小羊" //修改pinia里面的数据
        console.log(store.name)
	}
	    
	    
</script>
 
<style scoped>
	h1{
		width: 400px;
	    height:200px;
		background-color:deeppink;
	}
</style>

<template>
	<h1>aaa--{{store.msg}}----{{store.name}}--{{store.age}}</h1>
	<button @click="change1">修改store.name</button>
	<button @click="reset">reset</button>
	<router-view></router-view>
	
</template>
 
<script setup>
	import {useCar} from "../store/car.js"
	let store=useCar()
	 console.log(store)
	let change1=()=>{
		store.name="小羊"
		console.log(store.name)
	}
	
	let reset=()=>{ //初始化pinia数据
		store.$reset()
	}
	    
	   
</script>
 
<style scoped>
	h1{
		width: 400px;
	    height:200px;
		background-color:deeppink;
	}
</style>

<template>
	<h1>aaa--{{store.msg}}----{{store.name}}--{{store.age}}</h1>
	<button @click="change1">修改store.name</button>
	<button @click="reset">reset</button>
	<button @click="fn">fn</button>
	<router-view></router-view>
	
</template>
 
<script setup>
	import {useCar} from "../store/car.js"
	let store=useCar()
	 console.log(store)
	let change1=()=>{
		store.name="小羊"
		console.log(store.name)
	}
	
	let reset=()=>{ //重置
		store.$reset()
	}
	
	function fn(){
		//批量修改
		store.$patch({
		  name:"小羊",
		  age:20,
		})
	}
	   
</script>
 
<style scoped>
	h1{
		width: 400px;
	    height:200px;
		background-color:deeppink;
	}
</style>

//可以通过 store 的 $subscribe() 方法查看状态及其变化,通过patch修改状态时就会触发一次
store.$subscribe((mutation, state) => { 
  // 每当它发生变化时，将整个状态持久化到本地存储
  localStorage.setItem('test', JSON.stringify(state))
})

//store/index.js文件
export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  getters: {
    doubleCount: (state) => state.counter * 2,
  },
})
 
//组件中直接使用:  <p>Double count is {{ store.doubleCount }}</p>

export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  actions: {
    increment() {
      this.counter++//1.有this
    },
    randomizeCounter(state) {//2.有参数   想用哪个用哪个
      state.counter = Math.round(100 * Math.random())
    },
    randomizeCounter(state) {
        //异步函数
        axios("/test").then(res=>{
             state.counter = res.data.length
        })
     
    }
  },
})
 
//组件中的使用:
  setup() {
    const store = useStore()
    store.increment()
    store.randomizeCounter()
  }