Vue pinia模块化全局注册详解

 更新时间:2023年02月02日 08:52:30   作者:IN~Trying  
这篇文章主要介绍了Vue pinia模块化全局注册,Pinia是Vue.js团队成员专门为Vue开发的一个全新的状态管理库,并且已经被纳入官方github

Vue3中对pinia模块化全局注册

项目小使用简易的方式还不觉得,但是项目大了后就会发现引入的东西有些重复了

安装

yarn add pinia
# or with npm
npm install pinia

挂载实例

main.ts中 挂载pinia实例

import { createPinia } from "pinia";
...
const pinia = createPinia()
app.use(pinia);

话不多说,直接贴代码

在scr下创建stores文件夹,创建index.ts文件

// 使用options API模式定义,vue2的组件模型形式类似
// import useDemoStore  from "./modules/addNumber";
// export interface PiniaStore {
//     useDemoStore:ReturnType<typeof useDemoStore>
// }
// const piniaStore: PiniaStore = {} as PiniaStore;
// /**
//  * 注册app状态库
//  */
// export const registerStore = () => {
//     piniaStore.useDemoStore = useDemoStore()
// };
// export default piniaStore;
// 使用setup模式定义
import { useDemoStore } from "./modules/addNumber";
// import textContentStore from "./modules/textContent";  //单一个方法
import { textContentStore, usefruitStore } from "./modules/textContent"; //多个不同需缓存的方法
export interface PiniaStore {
  useDemoStore: ReturnType<typeof useDemoStore>;
  textContentStore: ReturnType<typeof textContentStore>;
  usefruitStore: ReturnType<typeof usefruitStore>;
}
const piniaStore: PiniaStore = {} as PiniaStore;
/**
 * 注册app状态库
 */
export const registerStore = () => {
  piniaStore.useDemoStore = useDemoStore();
  piniaStore.textContentStore = textContentStore();
  piniaStore.usefruitStore = usefruitStore();
};
export default piniaStore;

scr/stores/modules/

新建你的store.ts
这里使用了两种不同的数据持久化插件,如果不需要可忽略插件

1、pinia-plugin-persist 插件的数据持久化使用

2、pinia-plugin-persistedstate插件

两个插件的属性使用不一样,需注意
代码使用了两个不同的写法,

1、使用options API模式定义,vue2的组件模型形式类似

2、使用setup模式定义

主要是用作全局注册

import { defineStore } from "pinia";
import { ref } from "vue";
//  pinia-plugin-persist 插件的数据持久化使用
export const textContentStore = defineStore({
  id: "goods",
  state: () => {
    return {
      fruit: "苹果",
      price: 15,
    };
  },
  actions: {
    changeName() {
      this.fruit = "雪梨";
    },
    changePrice(val: number) {
      this.price = val;
    },
  },
  // 开启数据缓存
  persist: {
    enabled: true,
    key: "goods",
    //   strategies: [
    //     {
    //       storage: localStorage,
    //       paths: ['accessToken']
    //     },
    strategies: [
      //   自定义存储到 sessionStorage 和 localStorage
      { key: "fruit", storage: sessionStorage, paths: ["fruit"] },
      { key: "price", storage: localStorage, paths: ["price"] },
    ],
  },
});
export const usefruitStore = defineStore(
  "goods1",
  () => {
    const fruit1 = ref<string>("香蕉");
    const price1 = ref<number>(10);
    function changeName1() {
      fruit1.value = "雪梨";
    }
    function changePrice1(val: number) {
      price1.value = val;
    }
    return { fruit1, price1, changeName1, changePrice1 };
  },
  {
    //持久化存储配置 ,必须同步详情可看官方说明文档
    persist: {
      key: "_pinia_price1",
      storage: sessionStorage,
      paths: ["fruit1"],
    },
  }
);
// export const textContentStore = defineStore(
//   "counter",
//   () => {
//     const fruit = ref<string>("苹果");
//     const price = ref<number>(100);
//     function changeName() {
//       fruit.value = "雪梨";
//     }
//     function changePrice(val:number) {
//         price.value = val
//     }
//     return { fruit, price, changeName, changePrice, };
//   },
// //   {
// //     //持久化存储配置 ,必须同步详情可看官方说明文档
// //     persist: {
// //       key: "_pinia_fruit",
// //       storage: sessionStorage,
// //       paths: ["fruit"],
// //     },
// //   }
// );

页面

到页面上的使用

<h2>水果</h2>
    <h3>名称1:{{ fruit }}---价格:{{ price }}</h3>
    <button @click="changeName">修改名称</button>
    <button @click="ChangePrice">修改价格</button>
    --------------------------------------------
    <h3>名称2:{{ fruit1 }}---价格:{{ price1 }}</h3>
    <button @click="changeName1">修改名称1</button>
    <button @click="changePrice1(120)">修改价格1</button>
import PiniaStore from "../stores";
import { storeToRefs } from "pinia";
// setup composition API模式
const { fruit, price } = storeToRefs(PiniaStore.textContentStore);
const { changeName, changePrice } = PiniaStore.textContentStore;
const { fruit1, price1 } = storeToRefs(PiniaStore.usefruitStore);

相对来说项目小的话没什么必要做全局,但是项目大了可能这样会好维护一些

当然也会有更好的方式,只是我没发现

最后补充

打包解耦

到这里还不行,为了让appStore实例与项目解耦,在构建时要把appStore抽取到公共chunk,在vite.config.ts做如下配置

build: {
      outDir: "dist",
      rollupOptions: {
        output: {
          manualChunks(id) {
            //静态资源分拆打包
            ...其他配置
            // 将pinia的全局库实例打包进vendor,避免和页面一起打包造成资源重复引入
            if (id.includes(resolve(__dirname, "/src/store/index.ts"))) {
              return "vendor";
            }
          },
        },
      },
   }

到此这篇关于Vue pinia模块化全局注册详解的文章就介绍到这了,更多相关Vue pinia模块化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue axios 跨域请求无法带上cookie的解决

    Vue axios 跨域请求无法带上cookie的解决

    这篇文章主要介绍了Vue axios 跨域请求无法带上cookie的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue内嵌iframe跨域通信的实例代码

    vue内嵌iframe跨域通信的实例代码

    这篇文章主要介绍了vue内嵌iframe跨域通信,主要介绍了Vue组件中如何引入iframe,vue如何获取iframe对象以及iframe内的window对象,结合实例代码给大家介绍的非常详细需要的朋友可以参考下
    2022-11-11
  • vue项目部署到nginx/tomcat服务器的实现

    vue项目部署到nginx/tomcat服务器的实现

    这篇文章主要介绍了vue项目部署到nginx/tomcat服务器的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • vue中的依赖注入provide和inject简单介绍

    vue中的依赖注入provide和inject简单介绍

    这篇文章主要介绍了vue中的依赖注入provide和inject简单介绍,provide 选项允许我们指定我们想要提供给后代组件的数据/方法,本文通过组价刷新的案列给大家详细讲解,需要的朋友可以参考下
    2022-11-11
  • vue使用this.$message不生效的部分原因及解决方案

    vue使用this.$message不生效的部分原因及解决方案

    这篇文章主要介绍了vue使用this.$message不生效的部分原因及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-09-09
  • Vue自定义元素身上的右键事件问题

    Vue自定义元素身上的右键事件问题

    这篇文章主要介绍了Vue自定义元素身上的右键事件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • el-tree loadNode懒加载的实现

    el-tree loadNode懒加载的实现

    本文主要介绍了el-tree loadNode懒加载的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • Vuex与Vue router的使用详细讲解

    Vuex与Vue router的使用详细讲解

    在看这篇文章的几点要求:需要你先知道Vuex与Vue-Router是个什么东西,用来解决什么问题,以及它的基本使用。如果你还不懂的话,建议上官网了解下Vuex与Vue-Router的基本使用后再回来看这篇文章
    2022-11-11
  • 单页面Vue页面刷新出现闪烁问题及解决

    单页面Vue页面刷新出现闪烁问题及解决

    这篇文章主要介绍了单页面Vue页面刷新出现闪烁问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • vue中如何让子组件修改父组件数据

    vue中如何让子组件修改父组件数据

    这篇文章主要介绍了vue中子组件修改父组件数据的相关资料,文中介绍了vue中watch的认识,关于子组件修改父组件属性认识,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06

最新评论