【Vue3基础】Piniapinia和vuex的区别（1）pinia它没有mutation,他只有state，gett

pinia和vuex的区别

（1）pinia它没有mutation,他只有state，getters，action【同步、异步】使用他来修改state数据（2）pinia他默认也是存入内存中，如果需要使用本地存储，在配置上比vuex麻烦一点

（3）pinia语法上比vuex更容易理解和使用，灵活。（4）pinia没有modules配置，没一个独立的仓库都是definStore生成出来的

（5）pinia state是一个对象返回一个对象和组件的data是一样的语法

pinia优势：

完整的 TypeScript 支持：与在 Vuex 中添加 TypeScript 相比，添加 TypeScript 更容易、轻巧(体积约 1KB)
main.ts文件

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
import './style.css'

const app = createApp(App)

// 创建 Pinia实例
const pinia = createPinia()

// 挂载
app.use(pinia)

// storeToRefs 进行解构赋值
app.mount('#app')

store.ts文件

import { defineStore } from "pinia";

export const useMainStore = defineStore('main', {
    state: () => {
        return {
            count: 1000,
        }
    },
    getters: {

    },
    actions: {

    }
})

组件使用

<template>
  <div>
    <button @click="handleVal">{{ mainStore.count }}</button>
  </div>
</template>
<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import { useMainStore } from '../store/index'

const mainStore = useMainStore()
let { count } = storeToRefs(mainStore)
const handleVal = () => {
  // count.value++
  // $patch 批量处理数据
  mainStore.$patch({
    count: count.value + 1
  })
}

</script>