vue3.2 pinia的使用

目录

1 下载

2 引入 main.js

3 创建store --> common.js

4 vue3.2 项目中使用

5 监听state值 变化

---

1 下载

npm i pinia

2 引入 main.js

import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);

// 引入pinia
import { createPinia } from "pinia";
const pinia = createPinia();

app.use(pinia).mount("#app");

3 创建store --> common.js

import { defineStore } from "pinia";

export default defineStore("commonStore", {
  state: () => {
    return {
      count: 0,
      man: "男",
      arrLove: ["花"],
      objJob: { name1: "58" },
    };
  },
  actions: {
    selMan(val) {
      this.man = val;
    },
  },
  getters: {
    countAdd(state) {
      return state.count + 10;
    },
  },
});

4 vue3.2 项目中使用

<template>
  <div>
    <h5>store.man：{{store.man}}</h5>
    <h5>man：{{man}}</h5>
    <h5>count：{{count}}</h5>
    <h5>store.countAdd：{{store.countAdd}}</h5>
    <h5>countAdd：{{countAdd}}</h5>

    <h5 v-for=" l in store.arrLove" :key="l">{{l}}</h5>
    <h5>objJob：{{objJob}}</h5>

    <button @click="resetState">重置state</button>
  </div>
</template>

<script setup>
import useCommonStore from '@/store/aa.js'
import { storeToRefs } from 'pinia'

const store = useCommonStore()
let { man, count, countAdd, objJob } = storeToRefs(store)
console.log('===== store1', store.man)
console.log('===== store1', store.selMan)
console.log('===== store1', store.objJobe)
store.man = '哇哈'

store.objJob.name2 = '对象直接.添加值'
store.selMan('直接调用函数传值')
store.arrLove.push('数组直接push传值')
store.$patch(state => {
  state.arrLove.push({
    name1: '同城'
  })
})

// 将整个state替换
const resetState = () => {
  store.$state = {
    objJob: { 世界杯: '卡塔尔' }
  }
}
</script>

5 监听state值 变化

<script setup>

    store.$subscribe((mutation, state) => {
        console.log(mutation)
        console.log(state)
      },
      { detached: false }
    )

        /*
          *   mutation主要包含三个属性值：
          *   events：当前state改变的具体数据，包括改变前的值和改变后的值等等数据
          *   storeId：是当前store的id
          *   type：用于记录这次数据变化是通过什么途径，主要有三个分别是
          *         “direct” ：通过 action 变化的
                    ”patch object“ ：通过 $patch 传递对象的方式改变的
                    “patch function” ：通过 $patch 传递函数的方式改变的
          *
        */

        // 我们就可以在此处监听store中值的变化，当变化为某个值的时候，去做一些业务操作之类的


        /*
          * 第二个参数options对象，是各种配置参数
          * detached:布尔值，默认是 false，正常情况下，当订阅所在的组件被卸载时，
            订阅将被停止删除，
          * 如果设置detached值为 true 时，即使所在组件被卸载，订阅依然在生效
          * 参数还有immediate，deep，flush等等参数 和vue3 watch的参数是一样的
        */ 

         // 停止订阅
         // 函数赋值给一个变量，然后subscribe() 

</script>