和vue2中vuex用法类似
pinia中包含了 state:存放数据 getters:计算属性 actions:方法(可处理同/异步)
首先在项目中安装引入
npm i pinia
main.js中挂载
import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Vant from 'vant'
import 'vant/lib/index.css'
import { createPinia } from 'pinia' //1.引入pinia
const app = createApp(App)
const pinia = createPinia() //2.注册
app.use(router)
app.use(Vant)
app.use(pinia) //3.使用
app.mount('#app')
src>创建store文件夹>创建××.js文件
import { defineStore } from "pinia";
export const useAppStore = defineStore('use', {
state: () => ({
pinias: '3',
avatar: 'https://baidu.com'
}),
// 计算属性
getters: {
// changepinias: (state) => {
// return state.pinias >= '3' ? '大于3' : '小于3'
// }
// 简写
changepinias: state => state.pinias >= '3' ? '大于3' : '小于3',
},
// 方法 可处理同步和异步
actions: {
addpinias: state => {
console.log(state);
}
}
})
页面中使用
引用
//1.引入文件和所需pinia的方法
import { storeToRefs } from 'pinia';
import { useAppStore } from "@/store/app.js"
使用state
//2.使用
const store = useAppStore() //store是一个reactive响应式对象
//普通修改值是响应式的
store.pinias = 4
//结构赋值,可以修改需要对元数据进行修改 并且不是响应式 使用storeToRefs
//const { pinias, avatat } = storeToRefs(store)
// store.pinias = '666'
//console.log(store.pinias, 'pinia的结构---');
修改值$patch()
store.$patch((state) => {
state.pinias = '7878',
state.avatar = 'http://localhost:5173/ncishcv-app/visitingcard'
})
console.log(store.pinias, store.avatar, '--');
重置值$reset()
// 重置state所有值 $reset()
store.$reset()
console.log(store.pinias, store.avatar, '--');
使用getters
// 读取getters 计算出结果
console.log(store.changepinias);
使用actions
console.log(store.addpinias());