Vue3+Ts+Vite2+Pinia 搭建开发框架

1. 设置state

直接修改

$patch 修改 store 中的数据






actions 修改 store 中的数据






//actions中使用this修改state数据

import { defineStore } from 'pinia'

export const useUserStore = defineStore({
id: 'user',
state: () => ({
name: '用户名'
}),
getters: {
nameLength: (state) => state.name.length,
},
actions: {
updataUser(newName: string) {
this.name=newName
}
}
})


3. Getters使用
import { defineStore } from 'pinia'

export const useUserStore = defineStore({
id: 'user',
state: () => ({
name: '用户名'
}),
getters: {
nameLength: (state) => state.name.length,
},
})

4.Actions使用

同步actions使用 如设置state中使用方式相同，可以直接使用this设置state中数据
异步actions使用
支持async await ,支持同一个store中action之间可以用this调用，不同store中action之间可以用hooks引入方式调用

import { defineStore } from 'pinia'
import {userOtherStore} from './otherStore'
export const useUserStore = defineStore({
id: 'user',
state: () => ({
name: '用户名'
}),
actions: {
async login(params){
const {data}=await api.login(params)
this.updataUser(data) //同一个store中action之间可以用this调用
},
updataUser(newName: string) {
this.name=newName
const otherStore=userOtherStore() //不同store中action之间可以用hooks引入方式调用
otherStore.setName(newName)
}
}
})