pinia的基础应用

pinia的基础使用

pinia的安装

只需要在终端输入

npm install pinia

利用pinia定义一个store

在vue3的main.js中

import { createPinia } from 'pinia'

app.use(createPinia())

在相应的store的js文件中

其中pinia有两个写法

import { defineStore } from 'pinia'
//userstore是这个状态的唯一标识  这是pinia的setup Stores写法
export const usestore = defineStore('userinfo', () => {})
pinia的options Stores写法
export const usestore = defineStore('userinfo', {})

下面介绍setup Stores写法

state

在代码中定义数据再进行返回相当于options Stores的state

//在login.js
import { defineStore } from 'pinia'
import { reactive, ref } from 'vue'
export const usestore = defineStore('userinfo', () => {
    let logindata = reactive({})
    //或者ref都可以
    return{
    logindata
    }
    }

在业务文件中使用数据

import {usestore} from '../pinia/login'
var store=usestore()
//可以直接store.logindata使用login.js

getters和actions

相比于options Stores写法，setup Stores写法的函数相当于getters和actions

action支持异步调用，两种写法都可以

function setinfo(data) {
    logindata=data
}
function getinfo() {
    return logindata
}

在业务文件中

actions

let onSubmit=()=>{
store.setinfo(data.logindata)   //可以直接调动函数
}

getters

<div>{{store.getinfo().username}}</div>  //下面记得暴露了store  可直接使用


//JavaScript
import {usestore} from '../pinia/login'
setup(){
   
var store=usestore()
return{
store
}
}

$subscribe

当所属的的store的数据发生改变便执行回调函数

import {usestore} from '../pinia/login'
var store=usestore()
store.$subscribe((mutation, state)=>{
  console.log(mutation);
  console.log(state);
})

数据持久化（存储在本地）

下载插件pinia-plugin-persist

npm i pinia-plugin-persist

再在main.js引入

import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
const pinia = createPinia()
pinia.use(piniaPluginPersist)
app.use(pinia)

在pinia的文件下

对于setup Stores写法

import { defineStore } from 'pinia'
import { reactive, ref } from 'vue'
export const usestore = defineStore('userinfo', () => {
    let logindata = reactive({})
    function setinfo(data) {
        logindata.username = data.username
        logindata.passwrod = data.passwrod
    }
    function getinfo() {
        return logindata
    }
    return {
        logindata,
        setinfo,
        getinfo,
    }

}, {
    persist: {
        enabled: true,
        strategies: [{ key: 'user', storage: localStorage }]
    }
})

对于options setup写法来说只要在state同级加入persist配置即可