pinia使用方法 ts+setup 模块化开发，安装引入并使用

安装

如果是vite在创建项目的时候选择了安装pinia，就不需要手动下载和导入，如果没有的话， 通过终端 npm install pinia ，并且在main.ts引入

import { createPinia } from 'pinia'

import './style/reset.scss'
import App from './App.vue'
import router from './router'
// import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

app.use(createPinia())
// app.use(ElementPlus)
app.use(router)

app.mount('#app')

关于pinia的就是 import { createPinia } from 'pinia' 和 app.use(createPinia()) 这串代码

文件配置

如果是vite在创建项目的时候选择了安装pinia，在stores文件夹，如果不是的话，那就在src下手动 创建一个stores文件夹，并且在其中创建一个ts文件，我这里是叫user.ts

在user文件里面，就可以写入我们的pinia的代码了

import { defineStore } from 'pinia'

// 你可以任意命名 `defineStore()` 的返回值，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。
// (比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useUserStore = defineStore('user', {
    
    state: () => (
        { count: 0}
    ),
    getters: {
        double: (state) => state.count * 2,
    },
    actions: {
        increment(num:number) {
            this.count += num
        },
    },
})

defineStore的第一个参数user是这个user.ts文件的id，可以看到只有state,getters,actions这三个了，在pinia中，是没有vuex的mutations的，这是一个改变，现在我们可以之间在vue的文件中修改state里面的值，不需要mutations，非常方便

页面使用

在vue文件中，我们就可以使用我们的pinia了

<script setup lang="ts">
import { ref } from 'vue';
// 导入这个pinia文件
import { useUserStore } from '@/stores/user'
// 解构,非常重要
import { storeToRefs } from 'pinia';

// 使用pinia的getters,state
const store = useUserStore()
//直接把state和getters结构出来
let { count，double } = storeToRefs(store)

// state修改方法一
// count.value = 100
// state修改方法二
store.$patch(state => {
    state.count = 500
})

//使用actions
const changeyauv = (num: number) => {
    store.increment(num)
}
</script>

state 中的值有两个修改方法，一个是直接.value就能直接修改他的值，一个是store.$patch来修改他的值，这样不用.value。而且第二个方法更适合用于一次修改多个值，当然看喜欢用哪个写法就用哪种。在pinia我们可以直接修改state的值了，不像vuex这么麻烦。

getters 也是和state一样解构出来就能直接在页面上使用，但是getters会有缓存的喔

actions 可以通过store.increment的方法直接使用，像上方我还给这个increment传了一个值,不传值括号里面不写就行了

页面上展示，使用

在页面上就能展示我们获取到的state，getters，以及使用我们的actions的方法了

<template>
    
    <div @click="changeyauv(10)">调用actions的方法</div>
    <div>这是getters的值：{{ double }}</div>
    <div>这是state的值：{{ count }}</div>
</template>

模块化开发

我们不需要和vuex一样搞一个index文件什么什么的，直接store文件夹中和user.ts同级创建一个文件，比如我叫list.ts

list.ts里面代码和user.ts 里面差不多

import { defineStore } from 'pinia'
// 你可以任意命名 `defineStore()` 的返回值，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。
// (比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useListStore = defineStore('list', {
    // 其他配置...
    state: () => ({ count: 0, activeclassify: '2' }),
    getters: {
        double: (state) => state.count * 2,
        changeActiveclassify: (state) => {
            return state.activeclassify + '1000'
        }
    },
    actions: {
        increment(val: number) {
            this.count += val
        },
    },
})

list文件的唯一id就需要叫另一个名字，比如我这叫做list ，然后这边也是useListStore 页面的引入方法也是一样

import { useListStore } from '@/stores/list，只需要在页面这样引入就好了，就和user的引入方法一样，如果在同一个页面引入多个，记得那些命名不要冲突就可以，非常好用