Vue3——pinia部分(小满版本)(一)

简介: Vue3——pinia部分(小满版本)

第一章 安装-介绍

前言 全局状态管理工具


Pinia.js 有如下特点:


  • 完整的 ts 的支持;
  • 足够轻量,压缩后的体积只有 1kb 左右;
  • 去除 mutations,只有 state,getters,actions;
  • actions 支持同步和异步;
  • 代码扁平化没有模块嵌套,只有 store 的概念,store 之间可以自由使用,每一个 store 都是独立的
  • 无需手动添加 store,store 一旦创建便会自动添加;
  • 支持 Vue3 和 Vue2

让我们来看看他跟VueX的区别

pinia

VueX

State

State

Getters

Getters

Mutaions

Actions  同步异步都支持

Actions

[pinia官方文档][https://pinia.vuejs.org/] or [pinia在GitHub地址][https://github.com/vuejs/pinia]

1. 起步 安装

yarn add pinia
//你自己选一个就行了,看你用哪个包管理器
npm install pinia//小满在这里有加一个-S,这是生产模式,还有一个是-D是开发模式
//生产模式(依赖-S):会把包添加到 package.json 的 dependencies 下,这些包在项目打包上线后依然需要使用项目才能正常运行
//开发模式(依赖-D):会把包添加到 package.json 的 devDependencies 下,这些包只在做项目的时候会使用到,在项目打包上线后不依赖于这些包项目依然可以正常运行

2. 引入注册 Vue3

在main.ts或者js中引入,这得看你用的是js还是ts了哈哈


因为main.ts是用来放公共API的地方,所以在这里引入~

import { createApp } from 'vue'
import App from './App.vue'
import {createPinia} from 'pinia'//引入
//Vue3叫createPinia
//Vue2叫PiniaVuePlugin
 
const store = createPinia()//调用一下
let app = createApp(App)
 
app.use(store)//使用pinia
 
app.mount('#app')

Vue2 使用

import { createPinia, PiniaVuePlugin } from 'pinia'
 
Vue.use(PiniaVuePlugin)
const pinia = createPinia()
 
new Vue({
  el: '#app',
  // other options...
  // ...
  // note the same `pinia` instance can be used across multiple Vue apps on
  // the same page
  pinia,
})

第二章(初始化仓库 Store)

1. 新建一个文件夹 Store

2. 新建文件 [name].ts

当然,通常是叫index会好一点,不过你想怎么起的话其实无所谓

3. 定义仓库 Store

import { defineStore } from 'pinia'

前三步一步到位了兄弟们

4. 我们需要知道存储是使用定义的 defineStore(),并且它需要一个唯一的名称,作为第一个参数传递

这儿名称抽离出去了


新建文件 store-namespace/index.ts,嗯,其实就是命名空间

//namespace下的index.ts文件,抽离出来的名字都在这里了
export const enum Names {//暴露出去并且枚举
    Test = 'TEST'
}

store 引入

import { defineStore } from 'pinia'
import { Names } from './store-namespace'//抽离出去的名字最终还是需要引入回来store文件进行使用的
 
export const useTestStore = defineStore(Names.Test, {
  state()=>{
      return{
        current:1
        name:"小满、班花姐姐,洛佬"
    }
  }
})
//通过源码我们可以看到这里是:
state?:()=> S;//意思就是一个箭头函数,可选填入

这个名称,也称为 id,是必要的,Pania 使用它来将商店连接到 devtools。将返回的函数命名为 use... 是可组合项之间的约定,以使其使用习惯。

5. 定义值

State 箭头函数 返回一个对象 在对象里面定义值


箭头函数在源码定义了,刚刚才聊到的,对吧

import { defineStore } from 'pinia'
import { Names } from './store-namespce'
//defineStore一共就两个参数,一个是名字,一个是我们要放的数据内容
export const useTestStore = defineStore(Names.Test, {//请注意,这是Name.Test  不是Name,Test
     state:()=>{
         return {
             current:1
         }
     }
})
import { defineStore } from 'pinia'
import { Names } from './store-namespce'
 
export const useTestStore = defineStore(Names.Test, {
     state:()=>{
         return {
             current:1
         }
     },
     //类似于computed 可以帮我们去修饰我们的值
     getters:{
 
     },
     //类似methods 可以操作异步 和 同步 提交state
     actions:{
 
     }
})

要使用的话,直接在你想要使用的文件里面引入store商店就行了


//例子
import {useTestStore} from "./store"
//然后进行调用一下
const Test = useTestStore()

案例

以下为纯代码,无注释的可直接运行代码

//store下的index文件
import {defineStore} from "pinia";
import {Names} from "./store-name";
export const useTestStore = defineStore(Names.TEST,{
    state:()=>{
        return{
            name:"洛洛",
            Nickname:"洛佬,肥洛,狗洛,洛爆了,有事请问洛洛"
        }
    }
})
//store下的store-name文件
export const enum Names{
    TEST = 'TEST'
}
//App.vue主文件
<template>
<div>大家好!{{Test.name}}是一个外号为:{{Test.Nickname}}的人</div>
</template>
<script setup lang="ts">
import {useTestStore} from "./store"
const Test = useTestStore()
</script>
<style scoped>
</style>

第三章 — state

拥有5种方式来进行修改值

1.State 是允许直接修改值的 例如 current++

<template>
     <div>
         <button @click="Add">+</button>
          <div>
             {{Test.current}}
          </div>
     </div>
</template>
 
<script setup lang='ts'>
import {useTestStore} from './store'
const Test = useTestStore()
const Add = () => {
    Test.current++ //就直接修改就完事了,在VueX中是不被允许的
}
 
</script>
 
<style>
 
</style>

2. 批量修改 State 的值

在他的实例上有 $patch 方法可以批量修改多个值

<template>
     <div>
         <button @click="Add">+</button>
          <div>
             {{Test.current}}
          </div>
          <div>
            {{Test.age}}
          </div>
     </div>
</template>
 
<script setup lang='ts'>
import {useTestStore} from './store'
const Test = useTestStore()
const Add = () => {
    Test.$patch({
       current:200,
       age:300
    })
}
 
</script>
 
<style>
 
</style>

3. 批量修改函数形式

推荐使用函数形式 可以自定义修改逻辑


可以在里面进行if判断,for循环啥的都可以,明显灵活很多

<template>
     <div>
         <button @click="Add">+</button>
          <div>
             {{Test.current}}
          </div>
          <div>
            {{Test.age}}
          </div>
     </div>
</template>
 
<script setup lang='ts'>
import {useTestStore} from './store'
const Test = useTestStore()
const Add = () => {
    Test.$patch((state)=>{//这里的state就是我们在store仓库中的state(然后里面return了数值)
       state.current++;
       state.age = 40
    })
}
 
</script>
 
<style>
 
</style>

与第二章案例配套代码

<template>
<div>大家好!{{Test.name}}来自{{Test.form}}</div>
  <button @click="change">修改</button>
</template>
<script setup lang="ts">
import {useTestStore} from "./store"
const Test = useTestStore()
const change = ()=>{
  Test.$patch((state)=>{//state就是我们store仓库内的数据
    state.name = "小余"
    state.form = "QQ群855139333"
  })
}
</script>
<style scoped>
</style>

4. 通过原始对象修改整个实例

$state 您可以通过将 store 的属性设置为新对象来替换 store 的整个状态


缺点就是必须修改整个对象的所有属性

<template>
     <div>
         <button @click="Add">+</button>
          <div>
             {{Test.current}}
          </div>
          <div>
            {{Test.age}}
          </div>
     </div>
</template>
 
<script setup lang='ts'>
import {useTestStore} from './store'
const Test = useTestStore()
const Add = () => {
    Test.$state = {
       current:10,//全部都得修改,不然会报错,你也可以修改成一样的数值或者内容,但是不能不写
       age:30
    }    
}
 
</script>
 
<style>
 
</style>

配合第二章的案例

//App.vue文件
<template>
<div>大家好!{{Test.name}}来自{{Test.form}}</div>
  <button @click="change">修改</button>
</template>
<script setup lang="ts">
import {useTestStore} from "./store"
const Test = useTestStore()
const change = ()=>{
  Test.$state = {
    name:"小余",
    form:"泉州"
  }
}
</script>
<style scoped>
</style>

5. 通过 actions 修改

定义 Actions


在 actions 中直接使用 this 就可以指到 state 里面的值


import { defineStore } from 'pinia'
import { Names } from './store-naspace'
export const useTestStore = defineStore(Names.TEST, {
     state:()=>{
         return {
            current:1,
            age:30
         }
     },
 
     actions:{
         setCurrent () {////不能使用箭头函数,因为this的指向会出现问题
             this.current++
             //this是由定义好的store实例调用,箭头函数只会保存当前作用域的this,所以需要传统方式定义函数,根据调用者来改变this指向
         }
     }
})

使用方法直接在实例调用

<template>
     <div>
         <button @click="Add">+</button>
          <div>
             {{Test.current}}
          </div>
          <div>
            {{Test.age}}
          </div>
     </div>
</template>
 
<script setup lang='ts'>
import {useTestStore} from './store'
const Test = useTestStore()
const Add = () => {
     Test.setCurrent()
}
 
</script>
 
<style>
 
</style>


Vue3——pinia部分(小满版本)(二)https://developer.aliyun.com/article/1470386

目录
打赏
0
0
0
0
333
分享
相关文章
创建vue3项目步骤以及安装第三方插件步骤【保姆级教程】
这是一篇关于创建Vue项目的详细指南,涵盖从环境搭建到项目部署的全过程。
161 1
vue3使用pinia中的actions,需要调用接口的话
通过上述步骤,您可以在Vue 3中使用Pinia和actions来管理状态并调用API接口。Pinia的简洁设计使得状态管理和异步操作更加直观和易于维护。无论是安装配置、创建Store还是在组件中使用Store,都能轻松实现高效的状态管理和数据处理。
146 3
除了provide/inject,Vue3中还有哪些方式可以避免v-model的循环引用?
需要注意的是,在实际开发中,应根据具体的项目需求和组件结构来选择合适的方式来避免`v-model`的循环引用。同时,要综合考虑代码的可读性、可维护性和性能等因素,以确保系统的稳定和高效运行。
64 1
|
3月前
|
Vue3中使用provide/inject来避免v-model的循环引用
`provide`和`inject`是 Vue 3 中非常有用的特性,在处理一些复杂的组件间通信问题时,可以提供一种灵活的解决方案。通过合理使用它们,可以帮助我们更好地避免`v-model`的循环引用问题,提高代码的质量和可维护性。
149 58
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
74 8
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
181 64
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
66 12

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等