Vue3中的pinia的使用及组合写法与普通写法的区别

1、首先pinia可以自己后面按需安装，也可在项目创建时去勾选安装（这里我使用的是项目创建时自动安装的，吃了点亏，忘记这里是组合写法了）

min.ts

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'


import App from './App.vue'

const app = createApp(App)
//将pinia安装为插件
app.use(createPinia())

app.mount('#app')

store文件夹中的counter.ts （名字任起）

import { ref, computed } from 'vue'
// 引入defineStore
import { defineStore } from 'pinia'
// 创建实例并暴露
export const useStore = defineStore('counter', () => {
  const num= ref(0)
  const doubleNew = computed(() => num.value * 2)
  function increment() {
    num.value++
  }

  return { num, doubleNew , increment }
})

按照这个写法是不需要添加pinia核心（state、actions、getters），但需要return！！

在组件中直接使用即可，如下图

//<div>
//累计完成<span>{{ num }}</span>元
//</div>

// 引入pinia
import {useStore} from "@/stores/counter"
import { storeToRefs } from "pinia";
// 获取pinia的state模块
const store = useStore()
//解决数据响应式
const {num, doubleNew } = storeToRefs(store);
//方法需单独解构
const {increment} = store;

2、自定义安装pinia。

// 引入defineStore
import { defineStore } from 'pinia'
// 创建实例并暴露
export const useStore = defineStore('counter', {
    state:() =>{
        return{
            num:10
        }  
    },
    actions:{
        function increment(state) {
            state.num--
        }
    },
    getters:{
        newNum:(state){
            state.num++
        }
    }
})

3、在组件中使用，如下图

//<div>
//累计完成<span>{{ num }}</span>元
//</div>

// 引入pinia
import {useStore} from "@/stores/counter"
import { storeToRefs } from "pinia";
// 获取pinia的state模块
const store = useStore()
const {num, newNum} = storeToRefs(store);
const {increment} = store;