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"],
        }
    ]
}

})

相关推荐
Mr Xu_15 小时前
告别冗长 switch-case：Vue 项目中基于映射表的优雅路由数据匹配方案
前端·javascript·vue.js
前端摸鱼匠15 小时前
Vue 3 的toRefs保持响应性：讲解toRefs在解构响应式对象时的作用
前端·javascript·vue.js·前端框架·ecmascript
未来之窗软件服务17 小时前
未来之窗昭和仙君(六十五)Vue与跨地区多部门开发—东方仙盟练气
前端·javascript·vue.js·仙盟创梦ide·东方仙盟·昭和仙君
phltxy18 小时前
Vue 核心特性实战指南：指令、样式绑定、计算属性与侦听器
前端·javascript·vue.js
Byron070719 小时前
Vue 中使用 Tiptap 富文本编辑器的完整指南
前端·javascript·vue.js
Byron070721 小时前
从 0 到 1 搭建 Vue 前端工程化体系：提效、提质、降本实战落地
前端·javascript·vue.js
zhengfei61121 小时前
【AI平台】- 基于大模型的知识库与知识图谱智能体开发平台
vue.js·语言模型·langchain·知识图谱·多分类
徐小夕@趣谈前端21 小时前
Web文档的“Office时刻“：jitword共建版2.0发布！让浏览器变成本地生产力
前端·数据结构·vue.js·算法·开源·编辑器·es6
董世昌411 天前
深度解析浅拷贝与深拷贝：底层逻辑、实现方式及实战避坑
前端·javascript·vue.js
扶苏10021 天前
vue使用event.dataTransfer实现A容器数据拖拽复制到到B容器
前端·vue.js·chrome
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03使用 1panel面板 部署 php网站04OpenClaw Chrome扩展使用教程 - 浏览器中继控制05Linux下V2Ray安装配置指南06Vue-skills的中文文档07让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南08UV安装并设置国内源09从零搭建一个 PHP 登录注册系统（含完整源码）10一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示