创建项目,安装pinia

    npm init vite@latest

    yarn add pinia

创建store

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
// 创建pinia 实例
const pinia = createPinia()
const app =createApp(App)
// 挂载到 Vue 根实例上
app.use(pinia)
app.mount('#app')

import { defineStore} from 'pinia'
export const homeStore = defineStore('home',{
  state:()=>{
    return {
        helloWorld :'hello word'
    }
  },
  getters:{},
  actions:{}
})

参数说明

store:用来存储全局的状态的，这里边定义的，就可以是为SPA里全局的状态了,
getters属性：用来监视或者说是计算状态的变化的，有缓存的功能
actions属性：对state里数据变化的业务逻辑，需求不同，编写逻辑不同。说白了就是修改state全局状态数据的
defineStore()方法的第一个参数是创建的名称,名称必须是唯一的不能重复,第二个参数是一个对象

页面使用

<template>
  <h2 class="">{{ store.helloWorld }}</h2>
</template>
<script setup>
import { homeStore } from "../store/index";
const store = homeStore ();
</script>
//或
<template>
  <h2 class="">{{ helloWorld }}</h2>
</template>
<script setup>
import { storeToRefs } from "pinia";
import { homeStore } from "../store/index";
const store = homeStore();
const {helloWorld }  = store  //这种方式解构后数据不是响应式的
//所以官方提供了一个storeToRefs方法
const { helloWorld } = storeToRefs(store);
</script>

修改数据

在页面中定义一个button来修改页面的数据

<template>
  <button @click="editStore">修改store</button>
</template>
<script setup>
import { homeStore } from "../store/index";
const store = homeStore ();
//方式一
const editStore = () => {
  store.helloWorld = '你好!'
}
//方式二
const editStore = () => {
 store.$patch({
    helloWorld : store.helloWorld  === '你好!' ? '真好' : '真不好'
  });
}
//方式三,传递store对象修改数据
const editStore = () => {
 store.$patch((state) =>{
    state.helloWorld = store.helloWorld  === '你好!' ? '真好' : '真不好'
  });
}
</script>

actions使用

在store中定义好actions,方法在页面可以直接调用

actions:{
    changeData(){
        this.helloWorld='啦啦啦啦啦'
    }
  }
<template>
  <button @click="changeStore">修改store</button>
</template>
<script setup>
import { homeStore } from "../store/index";
const store = homeStore ();
const changeStore= () => {
 store.changeData()
}
</script>

getters使用

//getters相当于是Vue中的计算属性几乎一样,对数据进行处理,有缓存机制

getters:{
    helloHidden(state){
      return state.helloWorld.split(" ")
    }
  },

pinia尝鲜