Pinan的基本使用

<template>
  <button type="button" @click="changeFn">count is: {{ counters.count }}</button>
</template>


<script setup  lang="ts">
import { counter} from '../stores/counter'

const counters = counter()


function changeFn(){
// counters.count++
// counters.$patch({ count: counters.count + 1 })

counters.increment()
}

import { defineStore } from 'pinia'

export const counter = defineStore('counter', {
 state: () => ({
   count: 0,
 }),
 getters: {
   
 },
 actions: {
    increment() {
     this.count++
   },
 },
})

• 三种方式改变vuex里面的值

counters.count++

counters.$patch({ count: counters.count + 1 })

counters.increment()

Pinia和Vuex的区别

• 大致总结：

1. 支持选项式api和组合式api写法
2. pinia没有mutations，只有：state、getters、actions
3. pinia分模块不需要modules（之前vuex分模块需要modules）
4. TypeScript支持很好
5. 自动化代码拆分
6. pinia体积更小（性能更好）

安装使用Pinia

yarn add pinia

• main.js 引入

import {createPinia} from "pinia"

app.use(createpinia())

• 根目录新建store/index.js 中写入

import { defineStore } from 'pinia'

export const useStore = defineStore('storeId', {
    state: () => ({
        name: '张三',
        num:0,
    }),
    getters: {},
    actions: {
      
    },
})

• 使用:

import {useStore} from '../store

const store=useStore()

• pinia 可以直接修改数据,在vuex中不可以在组件中直接修改数据

import {storeToRefs} from 'pinia'
import {useStore} from '../store

const store=useStore()

let {num,name}=storeTorefs(store)


const change =()=>{
    name.value='李四'
    
}

// 批量修改
store.$patch(state=>{
        state.counter++
        state.arr.push(4)
        state.name='456'
})

• getters 的使用

getters:{
    changeNum(){
        console.log('getters')
        return this.num+1000
    }
}

import {useStore} from '../store

const store=useStore()
let {changeNum} = storeToRefs(store)

使用 changeNum 就是返回计算后的数据

import { defineStore } from 'pinia'

export const useStore = defineStore('storeId', {
    state: () => ({
        name: '张三',
        num:0,
    }),
    getters: {},
    actions: {
      upNum:(val){
            this.num+=val;
      }
    },
})

import {useStore} from '../store'

const store=useStore();

const btn=()=>{
    store.upNum(200)
}

pinia 分模块

import { defineStore } from 'pinia'

export const useStore = defineStore('storeId', {
     state: () => ({
      
    }),
    getters: {},
    actions: {},
})

• storeId 参数id就是命名模块来划分

• 使用

import {storeToRefs} from 'pinia'
import {userStore} from '../store/user'
import {shopStore} from '../store/shop'


const user=userStore();
const shop=shopStore()


let {age,nickName,changeAge} = storeToRefs(user)

let {shopList} = storeToRefs(shop)

pinia 的持久化存储

• 安装插件

npm i pinia-plugin-persist --save

• 创建一个index.js

• 引入到main.js

import store from '../store/index.js'

createApp(App).use(store).use(router).mount('#app')

• index.js

import {createPinia} from 'pinia'

//引入pinia的持久化存储插件
import piniaPluginPersist from "pinia-plugin-persist"

const store =createPinia()
//使用插件
store.use(piniaPluginPersist)

export default store

• 在store下的user.js 模块文件

persist:{
// 开启数据缓存
    enabled:true,
    //走localStorage 
    strategies:[
        {
            key:'my_user',
            storage:localStorage
         }
    ]
}