首页 > 其他分享 >10-pinia

10-pinia

时间:2024-05-08 21:49:14浏览次数:24  
标签:count 10 name counter js pinia import

使用前需要先安装

npm install pinia

// state、getter 和 action,我们可以假设这些概念相当于组件中的 data、 computed 和 methods
// data可以通过this去调用
// computed就是计算属性,也能从中直接调用data的内容

使用步骤

  1. 在src下面新建文件夹,比如store,然后在文件夹下面新建一个js文件,比如counter.js
  2. 在counter.js中写入代码
  3. 在main.js中使用插件
  4. 在组件中操作数据

常规写法

import { defineStore } from "pinia"

// 注意:这里的名称 counter 建议和你的js文件名称保持一致
export const useCounterStore =  defineStore("counter",  {
    // 定义变量
    state: () => {
        return {count: 0, name: "小满"}
    },

    // 这里写方法,与后端交互的逻辑可以写在这里。
    actions: {
        increment(num){
            console.log(num);
            // 与后端交互,才真正的把数量增加
            this.count++
        },
        changeName(){
            this.name = '大乔'
        }
    },
    // 获取数据
    getters: {
        // 这个函数是自己定义的,就相当于计算属性
        // 计算属性必须返回
        // 视图调用的时候,不需要写括号 {{counter.getCounter}}
        getCount(){
            return this.count * 2
        }
    }
})
// main.js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from "./router"

// 忽略掉无关的
import { createPinia } from 'pinia'
const pinia = createPinia() 
createApp(App).use(router).use(pinia).mount('#app')
<template>
  {{counter.count}}  -- {{counter.name}}  -- {{counter.getCount}} 
  <hr>
  <ul v-for="(item, index) in carArr" :key=item.id>
    <li>编号{{index + 1}} : 名称:{{item.name}}  价格: {{item.price}}  <button @click="joinCar(item.id)">加入购物车</button></li>
  </ul>
  <button @click="counter.changeName()">修改名称</button>
</template>

<script setup>
    import { reactive } from "vue";
    import {useCounterStore} from "../store/counter.js"
    
    // 以后通过counter对象 操作其中state getter action的东西
    const counter = useCounterStore()

    const carArr = reactive([
        {id:1, name: "抱枕", price: 33},
        {id:2, name: "香水", price: 79},
        {id:3, name: "茶叶", price: 199}
    ])

    function joinCar(num){
        counter.increment(num)
    }

</script>

更优雅的写法

只重写store/counter.js

import { defineStore } from "pinia"
import { ref } from "vue";


export const useCounterStore =  defineStore("counter",  () => {
    let count = ref(0)
    let name = ref("小满")

    function increment(){
        count.value++
    }
    function changeName(){
        name.value = '大乔'
    }
    function getCount(){
        return count.value * 2
    }

    return {count, name, increment, changeName, getCount}
})

https://juejin.cn/post/7057439040911441957?searchId=20240508183338AAF7DE2E0714BA25F418

标签:count,10,name,counter,js,pinia,import
From: https://www.cnblogs.com/ccsvip/p/18180919

相关文章

  • arc106d-ti-jie
    ARC106D思路左边到右边不好,改为任意一个到另一个。$$ans_x=\frac{1}{2}(\sum_in\sum_jn(a_i+a_j)x-\sum_in(2\timesa_i)^x)$$拆开$k$次方。$$(a_i+a_j)x=\sum_{k=0}x(\binom{x}{k}\times{a_i}^k\times{a_j}^{x-k})$$$$ans_x=\frac{1}{2}(\sum_{k=0}x(\sum_in{a_i}^......
  • 我买的键盘说明书 高斯 GS3104T-LI
    保修期一年键盘右上角四个小灯是什么意思???第一个是数字锁定指示灯(NumLock)第二个是大写锁定指示灯(CapsLock)第三个是滚动条锁定指示灯(ScrollLock)第四个是windows键锁定指示灯 Windows键,简称“Winkey”或“Win键”,是在计算机键盘左下角 Ctrl 和 Alt 键之间的按键,台式机全......
  • P10429 [蓝桥杯 2024 省 B] 拔河 题解
    思路通过动态规划计算出所有连续子序列的力量值之和,并将其存储在一个数组中然后排序,遍历一遍数组,找到相邻两个力量值之和的差的绝对值的最小值,然后输出这个答案就行了。时间复杂度大概是\(O(n^2\logn)\)。来个python的代码defmin_power_diff(n,a):#计算所有连续子序列......
  • 「高精度乘法+高精度加法」P10425 [蓝桥杯 2024 省 B] R 格式 题解
    解题思路题意分析:将浮点数乘以\(2^n\);四舍五入到最接近的整数。根据题意将\(d\times2^n\)分解为\(d\times2\times2\times2\times2……\),因为\(d\)长度小于等于\(1024\),所以可以使用高精度乘法的算法来实现一个小数乘以一个大于\(0\)的整数时,小数点位数本身不会......
  • 银河麒麟V10——问题记录
    1.在桌面登录用户后无法进入桌面,又退回到登录页面。权限问题:切到后台ctrl+alt+F1,进入主目录,chown-R用户名:用户名.Xauthority如仍解决不了问题,查看~.xesession-error日志,借助日志解决问题,如出现privatesocketdirermissiondeniedchmod 777 /tmp,修改/tmp权限。2......
  • win10 隐藏右键菜单
    打开注册表: 定位到HKEY_CLASSES_ROOT\Directory\Background\shell\ 在需要的文件夹下面添加 类型:DWORD32名称:HideBasedOnVelocityId值:6698a6十六进制......
  • C++基础-如何引入第三方静态库、动态库或自定义库 摘自 https://blog.csdn.net/u01310
    C++无论是内置库还是第三方库,都需要自己手动进行查找、配置、引入等工作。本文即是帮助完成C++项目对于库、框架如何完成依赖引入达成可调用的目的,重点讲述开发工具VisualStudio中的操作静态库(.lib)静态库引入适用用于大部分无开源的第三方库,开发者不需要关心库的具体实现如何,......
  • [转]矿卡P104再就业AI绘图(附centos安装cuda及配置stable diffusion教程)
    原文地址:矿卡P104再就业AI绘图(附centos安装cuda及配置stablediffusion教程)-哔哩哔哩早就听说p104用的gtx1080同款核心,只是阉割了编解码与视频输出,cuda还在,有8G显存,一看就很适合ai画图,当然,150不到的超低廉价格才是笔者购买它的决定性原因!    废话不多说,在linux上使用该显......
  • 10.JDBC事务
    要么都成功,要么都失败!ACID原则:保证数据的安全。开启事务事务提交事务回滚关闭事务转账:A:1000B:1000A(900)--100-->B(1100)publicclassTestJDBC2{@Testpublicvoidtest(){//配置信息Stringurl="jdbc:mysql://localhost:3306/jd......
  • Computer Basics - Top 10 keyboard shortcuts everyone should know
    REFhttps://www.computerhope.com/tips/tip79.htmTop10keyboardshortcuts(快捷键)everyoneshouldknowUsingkeyboardshortcutscangreatlyincreaseyourproductivity,reducerepetitivestrain,andhelpkeepyoufocused.Forexample,tocopytext,youcanhi......