pinia从0到1

山沟沟里的娃2024-12-28 16:52

一、创建项目

  1. npm create vite@latest

  2. 输入项目名称

  3. cd 到新建的项目

  4. npm install 安装项目依赖

  5. npm run dev 运行项目

二、安装Pinia

复制代码 
npm install pinia

三、在main.js中挂载

1.引入pinia

import {createPinia} form "pinia";

2.创建pinia对象

const pinia = createPinia();

3.挂载实例

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

四、创建store

复制代码 
//     ./src/store/index.js
// 1.引入pinia对象
import {defineStore} from 'pinia';

// 2.创建管理状态仓库
export const useStore = defineStore("store", {
    // 选项式，更接近于vuex
    state: () => {
        return {
            num: 1,
            name: 'gxy',
        }
    },
    getters: {},
    actions: {}
})

五、在组件中使用选项式store

复制代码 
<script setup>

  // 1.导入store
  import {useStore} from "../store"
  // 2.声明
  const store= useStore();

</script>

<template>
  <h1>HelloWorld</h1>

  <!-- 3.展示数据 -->
  <p>name：{{ store.name }}</p>
</template>

<style scoped>

</style>

六、组件中修改pinia数据

pinia中的数据在组件中可以直接修改值，不需要通过mutations。

复制代码 
<script setup>

  // 1.导入store
  import {useStore} from "../store"
  // 2.声明
  const store = useStore();


  // 4.修改state中的数据
  const numAdd = () => {
    store.num ++;
  }

</script>

<template>
  <h1>HelloWorld</h1>

  <!-- 3.展示数据 -->
  <p>name：{{ store.name }}</p>
  <p>num： {{ store.num }}</p>

  <button @click="numAdd">加</button>
</template>

<style scoped>

</style>

七、组件中解构数据进行修改

复制代码 
<script setup>

  // 1.导入store
  import {useStore} from "../store"

  // vue提供解构store的方式,将整个stroe中的数据元素全部解构（属性、方法等）
  import {toRefs} from "vue"

  // pinia提供解构store的方式，只解构属性。
  import {storeToRefs} from "pinia"


  // 2.声明
  const store = useStore();


  // 4.解构后修改数据,通过vue提供的方式解构出来的数据,是将整个stroe中的数据元素全部解构（属性、方法等）
  let {name, num} = toRefs(store);

  // 5.通过pinia提供的方式解构，只解构属性。
  // let {name, num} = storeToRefs(store);

  const numAdd = () => {
    num.value ++;
  }

</script>

<template>
  <h1>HelloWorld</h1>

  <!-- 3.展示数据 -->
  <p>name：{{ name }}</p>
  <p>num： {{ num }}</p>

  <button @click="numAdd">加</button>
</template>

<style scoped>

</style>

八、pinia对数据批量更新

复制代码 
<script setup>

  // 1.导入store
  import {useStore} from "../store"

  // pinia提供解构store的方式，只解构属性。
  import {storeToRefs} from "pinia"


  // 2.声明
  const store = useStore();

  let {name, num, arr} = storeToRefs(store);

  const numAdd = () => {
    // 4.批量修改数据
    store.$patch((state) => {
      state.num ++;
      state.name = '张三';
      state.arr.push(4)
    })
    // num.value ++;
  }

</script>

<template>
  <h1>HelloWorld</h1>

  <!-- 3.展示数据 -->
  <p>name：{{ name }}</p>
  <p>num： {{ num }}</p>
  <p>arr： {{ arr }}</p>

  <button @click="numAdd">加</button>
</template>

<style scoped>

</style>

九、pinia中的getters（Pinia中的getter和Vue中的计算属性几乎一样，在获取State值之前可以做一些逻辑处理。getter中的值有缓存特性，如果值没有改变，多次使用也只会调用一次）

js

复制代码 
// 1.引入pinia对象
import {defineStore} from 'pinia';

// 2.创建管理状态仓库
export const useStore = defineStore("store", {
    // 选项式，更接近于vuex
    state: () => {
        return {
            num: 1,
            name: 'gxy',
            arr: [1,2,3]
        }
    },
    getters: {  //getter中不仅可以传递state直接改变数据状态，还可以使用this来改变数据
        // 通过state来获取改变数据
        changeNums(state) {
            return state.num + 5
        },
        // 通过this来获取改变数据
        changeNum() {
            // 由于该方法有缓存机制，所以不管在页面中调用几次，这里只会运行一次（log只会打印一次）。这样大大提高了运行性能。
            console.log('************************');
            return this.num + 5
        }
    },
    actions: {}
})

组件

复制代码 
<script setup>

  // 1.导入store
  import {useStore} from "../store"

  // pinia提供解构store的方式，只解构属性。
  import {storeToRefs} from "pinia"


  // 2.声明
  const store = useStore();
  let {name, num, arr, changeNum} = storeToRefs(store);

</script>

<template>
  <h1>HelloWorld</h1>

  <!-- 3.展示数据 -->
  <p>num： {{ changeNum }}</p>
  <p>num： {{ changeNum }}</p>
  <p>num： {{ changeNum }}</p>
</template>

<style scoped>

</style>

十、actions的使用

在actions中定义的方法在任务组件中都可以调用

js

复制代码 
// 1.引入pinia对象
import {defineStore} from 'pinia';

// 2.创建管理状态仓库
export const useStore = defineStore("store", {
    // 选项式，更接近于vuex
    state: () => {
        return {
            num: 1,
            name: 'gxy',
            arr: [1,2,3]
        }
    },
    getters: {  //getter中不仅可以传递state直接改变数据状态，还可以使用this来改变数据
        
    },
    actions: {
        upData(val) {
            this.num += val
        }
    }
})

组件

复制代码 
<script setup>

  // 1.导入store
  import {useStore} from "../store"

  // pinia提供解构store的方式，只解构属性。
  import {storeToRefs} from "pinia"


  // 2.声明
  const store = useStore();
  let {name, num, arr, changeNum} = storeToRefs(store);


  const updata = () => {
    store.upData(200)
  }
</script>

<template>
  <h1>HelloWorld</h1>

  <!-- 3.展示数据 -->
  <p>num： {{ changeNum }}</p>
  <p>num： {{ changeNum }}</p>
  <p>num： {{ changeNum }}</p>
  <p>nums： {{ num }}</p>

  <!-- 4.调用actions里的方法来实现更新数据 -->
  <div @click="updata">upDate</div>
</template>

<style scoped>

</style>

十一、Pinia模块互相调用

1.在store中创建一个Shop.js，用于管理店铺数据。

2.在主管理器中引入Shop管理器，通过实例后就可以获取到Shop中的数据了。

复制代码 
import {defineStore} from 'pinia';


// 1.导入shop模块
import {useShopStore} from './shop';

export const useStore = defineStore("store", {
    // 选项式，更接近于vuex
    state: () => {
        return {
            num: 1,
            name: 'gxy',
            arr: [1,2,3]
        }
    },
    getters: {  //getter中不仅可以传递state直接改变数据状态，还可以使用this来改变数据

        // 获取shop数据方法
        getShopList() {
            return useShopStore().list;
        }
    },
    actions: {
        upData(val) {
            this.num += val
        }
    }
})

组件

复制代码 
<script setup>

  // 1.导入store
  import {useStore} from "../store"

  // pinia提供解构store的方式，只解构属性。
  import {storeToRefs} from "pinia"


  // 2.声明
  const store = useStore();
  let {name, num, arr, getShopList} = storeToRefs(store);


  const updata = () => {
    store.upData(200)
  }
</script>

<template>
  <h1>HelloWorld</h1>

  <!-- 3.展示数据 -->
  <p>num： {{ changeNum }}</p>
  <p>num： {{ changeNum }}</p>
  <p>num： {{ changeNum }}</p>
  <p>nums： {{ num }}</p>


  <!-- 展示shop数据 -->
  <p>shop: {{ getShopList }}</p>

  <!-- 4.调用actions里的方法来实现更新数据 -->
  <div @click="updata">upDate</div>
</template>

<style scoped>

</style>

十二、pinia数据持久化

1.安装插件

npm install pinia-plugin-persist

2.在main.js中挂载该插件

复制代码 
import { createApp } from 'vue'
import App from './App.vue'
import {createPinia} from "pinia"

// 1.导入 pinia持久化插件
import { piniaPluginPersist } from "pinia-plugin-persist"

const pinia = createPinia();

// 2.将插件注册在Pinia中
pinia.use(piniaPluginPersist)

const app = createApp(App);

app.use(pinia);

app.mount('#app');

3.在对应的数据管理器中配置持久化

import {defineStore} from "pinia"

export const useShopStore = defineStore('shop', {

state: () => {

return {

list: ['零食','生鲜'],

price: [12,13]

}

},

getters: {

复制代码 
},
actions: {

},
// 使用插件开启数据缓存
persist: {
    enabled: true,
    strategies: [
        {
            // key的名称
            key: "my-shop",
            // 更改默认存储，改为localStorage
            strorage: localStorage,
            // 默认是全部进行存储
            // 可以选择哪些进行local存储，这样就不用全部都进行存储了。
            paths: ["list"],
        }
    ]
}

})

相关推荐
澄江静如练_30 分钟前
小程序 存存上下滑动的页面
前端·javascript·vue.js
源码方舟37 分钟前
基于SpringBoot+Vue的房屋租赁管理系统源码包（完整版）开发实战
vue.js·spring boot·后端
m0_513962531 小时前
vue-ganttastic甘特图label标签横向滚动固定方法
javascript·vue.js·甘特图
菜鸟una1 小时前
【taro3 + vue3 + webpack4】在微信小程序中的请求封装及使用
前端·vue.js·微信小程序·小程序·typescript·taro
Java&Develop1 小时前
怎么查看当前vue项目，要求的node.js版本
vue.js
松树戈2 小时前
openfeign与dubbo调用下载excel实践
vue.js·spring cloud·elementui·dubbo
跑调却靠谱2 小时前
elementUI调整滚动条高度后与固定列冲突问题解决
前端·vue.js·elementui
全职计算机毕业设计2 小时前
SpringBoot Vue MySQL酒店民宿预订系统源码（支付宝沙箱支付）+代码讲解视频
vue.js·spring boot·mysql
ShallowLin8 小时前
vue3学习——组合式 API：生命周期钩子
前端·javascript·vue.js
Nejosi_念旧8 小时前
Vue API 、element-plus自动导入插件
前端·javascript·vue.js
热门推荐
01YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03KGG转MP3工具|非KGM文件|解密音频04【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！05Coze扣子平台完整体验和实践（附国内和国际版对比）06DeepSeek各版本说明与优缺点分析07【解决】Android Gradle Sync 报错 Could not read workspace metadata08YOLOv5改进 | 添加CA注意力机制 + 增加预测层 + 更换损失函数之GIoU09苍穹外卖面试总结10VMware虚拟机安装Win7专业版保姆级教程（附镜像包）