vue3中的pinia(大菠萝)

和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());