pinia的基本使用

pinia 的使用

• 安装

• 在 main.js 中引入

  import {createPinia} from 'pinia'  
  const pinia = createPinia();//实例化pinia
  createApp(App).use(router).use(pinia).mount('#app')
  

• store/index.js

  第一个参数(例如:main)：相当于为容器起一个名字。注意：这里的名字必须唯一，不能重复。

  第二个参数：可以简单理解为一个配置对象，对容器仓库的配置说明_

  import { defineStore } from "pinia";
  export const mainStore = defineStore("main", {
    state: () => ({
      nav: [],
      count: 0
    }),
    getters: {
      changeCount() {
        return this.count + 10;
      },
    },
    actions: {
      setNav(data) {
        this.nav = data;
      },
    },
  });
  

• 数据持久化

  • 安装插件 pinia-plugin-persist
  • main.js 中引入插件

    import { createPinia } from "pinia";
    import piniaPluginPersist from "pinia-plugin-persist";
    const pinia = createPinia();
    pinia.use(piniaPluginPersist);
    createApp(App).use(router).use(pinia).mount("#app");
    

  • 模块开启数据持久化

    persist: {
          enabled: true, //开启
          strategies:[
              {
                  key: 'store',
                  storage: sessionStorage,
                  paths:['count']
              }
          ]
      }
    

  • 引用状态数据

    <template>
      <div>
          <p>{{store.title}}</p> <!-- 方法1 -->
          <p>{{title}}</p> <!-- 方法2 -->
      </div>
    </template>
    <script setup>
    import {ref,reactive} from 'vue'
    import {mainStore} from '@/store/index' //导入状态仓库
    const store = mainStore(); //方法1: 实例化仓库
    //方法2: 实例化仓库 (但是:结构后数据会失去响应式;解决方案见修改数据状态)
    const {title} = mainStore();
    </script>
    

  • 修改数据状态

    <template>
      <div>
          <p>{{store.title}}</p>
          <p>数据：{{count}}</p>
          <button @click="handleClick">修改状态数据</button>
      </div>
    </template>
    <script setup>
    import {ref,reactive} from 'vue'
    import {mainStore} from '@/store/index' //导入状态仓库
    import { storeToRefs } from "pinia";
    const store = mainStore(); //实例化仓库
    //解构并使数据具有响应式
    const {count} = storeToRefs(store);
    function handleClick() {
       count.value++;
    }
    </script>