Vue3使用Pinia

1.安装

npm i?pinia

?2.搭建架子文件

2.1main.js

import { createApp } from 'vue'
// 引入pinia
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'
// 创建pinia
const app = createApp(App)
//安装pinia
app.use(createPinia())

app.use(router)

app.mount('#app')

2.2index.js

import {userStore} from "@/stores/modules/user.js";

export  const useStore=()=>{
    return {
        user:userStore()
    }
}

2.3user.js?

import { defineStore } from 'pinia'

export const userStore = defineStore('user', {
    state(){
        return{
            sum:6
        }
    },
    actions:{
        modifySum(param1,param2){
            console.log(param1,param2)
           return  this.sum++
        }
    },
    getters:{
        // 想用this就不能用箭头寒素
        bigSum(state){
            return  this.sum*10
        }
        // bigSum:(state)=>state.sum*10
    }

})

3.测试Demo?

<script setup>
import {useStore} from "@/stores/index.js"
import {storeToRefs} from "pinia";


const countStore = useStore()
// storeToRefs只会关注store里面的数据，而不像toRefs包裹所有的东西。
const {sum} = storeToRefs(countStore.user)

// 解构countStore会失去响应式

function modify1() {
  // 修改数据方式1
  countStore.user.sum = 5
}
// 修改数据2 (有误)
// function modify2(){
//   countStore.$dispose({
//     user:{
//       sum:9
//     }
//
//   })
// }
// 修改数据3
function modify3() {
  // 这边写几个参数，对应的actions里面就可以接受几个参数
  countStore.user.modifySum("启动1", "启动2")
}

</script>

<template>
  <div>
    <div @click="modify3">demo</div>
<!--      都可以拿到sum的值-->
      <div>pinia里面的值{{countStore.user.sum}}</div>
      <div>pinia里面的值{{countStore.user.$state.sum}}</div>
    <div>pinia里面的值{{ sum }}</div>
  </div>
</template>

?