VUE3中使用pinia

Vue3中使用pinia

安装依赖

yarn add pinia
//下面这个取决你需不需要数据持久化安装
yarn add pinia-plugin-persist

挂载

import {createPinia} from "pinia";
//数据持久化
import piniaPersist from 'pinia-plugin-persist'
const pinia = createPinia();
pinia.use(piniaPersist);
app.use(pinia);

开始

在src目录下创建store文件夹,然后创建index.ts文件

import { defineStore } from "pinia"
/**
 * 这个 第一个参数main，也称为 id，是必要的，Pinia 使用它来将 store 连接到 devtools。
 * 将返回的函数命名为use...（更好的语义化） 是跨可组合项的约定，以使其符合你的使用习惯。
 */
export const useStore  = defineStore('main', {

  state: () => {
    return {
      systemName:'XX管理系统'
    }
  },
  /**
   * 用来封装计算属性 有缓存功能  类似于computed
   */
  getters: {
    getSystemName(state){
      return `我是一个${state.systemName}`
    }

    //或者不使用state传递参数直接使用this
    //getNum(){
    //    return `我是一个计数器${this.count}`
    // }

  },
  /**
   * 编辑业务逻辑  类似于methods
   */
  actions: {
    changeState(){
      this.systemName = 'xx管理系统';
    }
  },persist: {
    enabled: true, // 开启数据缓存
    strategies: [
      {
        key: 'name',//存储key值
        storage: localStorage, // 默认是sessionStorage
        paths: ['systemName'] //指定字段存储数据
      }
    ],
  }

})

使用-js

<script>
import {useStore} from "@/store";
import {storeToRefs} from 'pinia';
export default {
  name: "TopLayout",
  setup(){
    const store = useStore();
    // 如果不想使用stroe.可以使用解构，但使用解构会使其失去响应式，这时候可以用 pinia 的提供的 storeToRefs
    // 通过storeToRefs解构出来的可以响应式
    const {systemName} = storeToRefs(store);

    //替换Store整个状态
    store.$state = { systemName:'Mars管理系统后台' };
    // 修改store数据
    store.systemName = "Mars的一小步,人类的一大步"
    // 除了直接用 store.systemName 修改 store，你还可以调用 $patch 方法。 它允许您使用部分“state”对象同时应用多个更改：
    store.$patch({
      systemName:"小小的Mars,大大的牛批"
    })
    // $patch 方法也接受一个函数来批量修改集合内部分对象的情况
    store.$patch((state)=>{
      state.systemName="来自火星的Mars战神"
    })
    // 通过action修改
    store.changeState();
    // Pinia中的 getters 与vue中的getter同为计算属性，具有缓存性，如果getters中的属性值未发生变化，多次调用只执行一次
    // 语法:return出store在html标签中直接使用store.getSystemName
    return{
      systemName,
      store
    }
  }
}
</script>

template

<h1>{{ getSystemName }}</h1>

<h1>{{ store.systemName }}</h1>

<h1>{{ store.getSystemName }}</h1>

总结

pinia它没有mutation,他只有state，getters，action【同步、异步】使用他来修改state数据
每个store都是独立的可以相互作用也可以独立使用,非常灵活.