pinia的基本使用

npm install pinia //安装pinia

import { createPinia } from 'pinia' 
app.use(createPinia()) //main.js中使用pinia

//新建一个store文件夹 类似于vuex
// src/store/index.js
import { defineStore } from 'pinia'

const mainStore = defineStore('main', {
    state: () => {
        count: 0    
    },
    getters: {},
    actions: {}
})

export default mainStore

//使用store
import { mainStore } from '../store/index'
const store = mainStore()

<template>
    {{store.count} 
</template>

//由于store是一个对象 可以直接解构
const { count } = mainStore()
//在模板中直接就可以用count渲染数据 但是由于这样解构的数据不是响应式的 即使数据发生了变化 也不会在界面重新渲染 需要引入一个函数
import { storeToRefs } from 'pinia'
const { count } = storeToRefs(mainStore()) //这样count就是响应式了

//简单的数据修改
const store = mainStore()
store.count++; //官网推荐使用$patch方法修改数据 提高性能
//1.对象方式
store.$patch({
    count: store.count++
})
//2.函数方式
store.$patch((state) => {
    state.count++
})

//通过actions修改数据
const mainStore = defineStore('main', {
    state: () => {
        return {
            count: 0        
        }    
    },
    actions: {
        countIncrement(payload) {
            this.count++
            console.log(payload)        
        }    
    }
})
//调用actions方法
const store = mainStore()
store.countIncrement('payload')

//getter方法
const mainStore = defineStore('main', {
    state: () => {
        return {
            count: 0        
        }    
    },
    getters: {
        doubleCount(state) {
            return state.count * 2 //并且getter有缓存 多次调用只会执行一次        
        //不仅可以用state修改数据 还可用this this.count * 2
        }    
    }
})
//调用getter
{{store.doubleCount}}

//store中的相互调用

//1.新建另一个store
import { defineStore } from 'pinia'
const fooStore = defineStore('foo', {
    state: () => {
        return {
            mvList: []        
        }    
    }
})
export default fooStore
//2.在mainStore中引用fooStore
import fooStore from 'import fooStore from './foo'
const mainStore = defineStore('main', {
    getters: {
        getMvList() {
            return fooStore().mvList //获取到另外一个store的数据                        
        }    
    }
})