开始

将就着看, 主要是语法

配置

1. 安装
2. 入口文件挂载为 vue 插件
3. src/stores 文件中声明
4. 组件引入使用

1.安装

cmd

yarn add pinia@next
# or
npm install pinia@next

2.入口文件配置

src/main.js

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// 第二步, 把 Pinia 挂载为 vue 插件
import {createPinia} from 'pinia'
app.use(createPinia());

app.mount('#app')

3.在 src/stores 文件声明 store

stores/stores.js

import {defineStore} from 'pinia'

export const usexxxStore = defineStore('storeId', {
    
    // 这里可以声明 state
    // 这里可以声明 getters
    // 这里可以声明 actions
});

4. 在组件中引入, 并使用 store

import {useStore} from '@/stores/counter'

export default{
    setup(){
        // 获取从 stores 中获取到的 store
        const store = useStore();
        return {}
    },
}

state

声明

src/stores

import {defineStore} from 'pinia'

export const usexxxStore = defineStore('storeId', {
    
    // 这里可以声明 state
    // 第一种
    state:()=>{
        return {name: 'jerry'}
    },
    // 第二种
    state: ()=>({ count:0 })
    
    
    // 这里可以声明 getters
    // 这里可以声明 actions
});

使用

一般访问

<script setup>
import {useStore} from '@/stores/counter'
const store = useStore();
</script>

<template>
	<h1>
        {{store.name}}
    </h1>
</template>

组件访问

<script>
import {storeToRefs} from 'pinia'
import {useCounterStore} from '@/stores/counter'

export default{
    setup(){
        const {name} = storeToRefs(useCounterStore());
        return {
            name
        }
    },
}
</script>

<template>
	<h1>
        {{name}}
    </h1>
</template>

Getters

1. 简单使用 Getters

store/main.js

import {defineStore} from 'pinia'

export const useMainStore = defineStore('main', {
    
    // 这里可以声明 state
    state: ()=>({
        name: 'jerry', 
        count:0 
    }),
   
    // 这里可以声明 getters
    getters: {
    	doubleCount(state){
    		return state.count * 2;
		}
	}
    // 这里可以声明 actions
});

App.vue

<script setup>
import {storeToRefs} from 'pinia'
import {useMainStore} from '@/stores/counter'
const {name, count, doubleCount} = storeToRefs(useMainStore());
</script>

<template>
	<h1>
        {{doubleCount}}
    </h1>
</template>

2. 访问自己 store 中的其他 Getters

store/main.js

import {defineStore} from 'pinia'

export const useMainStore = defineStore('main', {
    
    // 这里可以声明 state
    state: ()=>({
        name: 'jerry', 
        count:0 
    }),
   
    // 这里可以声明 getters
    getters: {
    	doubleCount(state){
    		return state.count * 2;
		},
        doubleCountPlus(){
    		return this.doubleCount + 1;
		},
	}
    // 这里可以声明 actions
});

App.vue

<script setup>
import {storeToRefs} from 'pinia'
import {useMainStore} from '@/stores/counter'
const {doubleCountPlus} = storeToRefs(useMainStore());
</script>

<template>
	<h1>
        {{doubleCountPlus}}
    </h1>
</template>

3. 给 Getters 传递参数

store/main.js

import {defineStore} from 'pinia'

export const useMainStore = defineStore('main', {
    
    // 这里可以声明 state
    state: ()=>({
        name: 'jerry', 
        count:0 
    }),
   
    // 这里可以声明 getters
    getters: {
    	doubleCount(state){
    		return state.count * 2;
		},
        doubleCountPlus(){
            return (a)=>{
                return this.doubleCount + a;
            }
		},
	}
    // 这里可以声明 actions
});

App.vue

<script setup>
import {storeToRefs} from 'pinia'
import {useMainStore} from '@/stores/counter'
const {name, count, doubleCount, doubleCountPlus} = storeToRefs(useMainStore());
</script>

<template>
	<h1>
        {{doubleCountPlus(3)}}
    </h1>
</template>

4. 访问其他 store 中的 Getters

store/default.js

import {defineStore} from 'pinia'

export const useDefaultStore = defineStore('default', {
    
    // 这里可以声明 state
    state: ()=>({
        time:2
    }),
   
    // 这里可以声明 getters
    getters: {
    	calcTime(state){
    		return state.time + 2;
		},
	}
    // 这里可以声明 actions
});

store/main.js

import {defineStore} from 'pinia'
import {useDefaultStore} from './default'

export const useMainStore = defineStore('main', {
    
    // 这里可以声明 state
    state: ()=>({
        name: 'jerry', 
        count:0 
    }),
   
    // 这里可以声明 getters
    getters: {
        addDefault(state){
            const store = useDefaultStore();
            return state.count + store.calcTime;
		},
	}
    // 这里可以声明 actions
});

App.vue

<script setup>
import {storeToRefs} from 'pinia'
import {useMainStore} from '@/stores/counter'
const {addDefault} = storeToRefs(useMainStore());
</script>

<template>
	<h1>
        {{addDefault}}
    </h1>
</template>

Actions

1. 使用 actions 处理同步任务

store/main.js

import {defineStore} from 'pinia'

export const useMainStore = defineStore('main', {
    
    // 这里可以声明 state
    state: ()=>({
        name: 'jerry', 
        count:0 
    }),
   
    // 这里可以声明 getters
    // 这里可以声明 actions
    actions:{
        addCount(num){
            this.count += num;
        }
	}
});

App.vue

<script setup>
import {storeToRefs} from 'pinia'
import {useMainStore} from '@/stores/counter'
    
const {addCount} = useMainStore();
const {count} = storeToRefs(useMainStore());
</script>

<template>
    <button @click="addCount(4)">
        点击
    </button>
	<h1>
        {{count}}
    </h1>
</template>

2. 使用 actions 处理异步任务

store/main.js

import {defineStore} from 'pinia'

export const useMainStore = defineStore('main', {
    
    // 这里可以声明 state
    state: ()=>({
        name: 'jerry', 
        count:0 
    }),
   
    // 这里可以声明 getters
    // 这里可以声明 actions
    actions:{
        addCount(num){
            setTimeout(()=>{
                this.count += num;
            }, 3000);
        }
	}
});

App.vue

<script setup>
import {storeToRefs} from 'pinia'
import {useMainStore} from '@/stores/counter'
    
const {addCount} = useMainStore();
const {count} = storeToRefs(useMainStore());
</script>

<template>
    <button @click="addCount(4)">
        点击
    </button>
	<h1>
        {{count}}
    </h1>
</template>

结束

最后感觉是 集中获取变量比较麻烦,不如 veux , 有更好的方法欢迎评论区留言

欢迎加我讨论