Vue3Pinia

已于 2022-04-02 10:48:33 修改
阅读量1.9k 收藏 2
点赞数 3
分类专栏： vue pinia 文章标签： vue.js 前端 javascript
于 2022-04-01 15:42:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Qiuxuntao/article/details/123898634
版权
vue 同时被 2 个专栏收录
4 篇文章 2 订阅
订阅专栏
pinia
1 篇文章 0 订阅
订阅专栏

文章目录

一、创建项目

npm create vite@latest

> cd <your-project-name>
> npm install
> npm run dev

二、下载pinia

npm i pinia

三、配置main .js

import { createApp } from 'vue'
import App from './App.vue'
//1.安装pinia npm install pinia
//2.导入pinia
import {createPinia} from 'pinia'
//3.挂载pinia
createApp(App).use(createPinia()).mount('#app')

四、配置store

4.1、在src目录下新建store文件夹，接着在store目录下新建index.js
4.2、配置index.js

//从pinia导入defineStore
import {defineStore} from 'pinia'

export default defineStore('main',{
    state:()=>{
        return {
            count:10,
            list:[{
                name:'mac',
                price:12000

            },
            {
                name:'macpro',
                price:16000
            }]
        }
    }
})

五、在App.vue进行操作修改state里面的数据

5.1、对count简单的++

<script setup lang="ts">
//导入store的模块
import useMainStore from './store/index.ts'
//使用这个store
const store =useMainStore()

function handelClick() {
  store.count++
}
</script>


<template>
<div>
  <h1>商品数量:{{store.count}}</h1>
  <button @click="handleClick">增加</button>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

5.2、使用$patch 增加一个列表数据和count+10

<script setup lang="ts">
//导入store的模块
import useMainStore from './store/index.ts'
//使用这个store
const store =useMainStore()
function  patchFnClick() {
  store.$patch((state)=>{
    state.count+=10;
    state.list.push({
       name:'华为',
      price:12000
    })
  })

}

</script>

<template>
<div>
  <h1>商品数量:{{store.count}}</h1>
  <ul> <li v-for='item in store.list'>{{item.name}}-----{{item.price}}</li></ul>
  <button @click="patchFnClick">+10</button>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

5.3、使用$state替换原始state里面的数据

<script setup lang="ts">
//导入store的模块
import useMainStore from './store/index.ts'
//使用这个store
const store =useMainStore()


//使用$state替换原始state里面的数据
function toggelState() {
  store.$state={
    count:10000,
    list:[{
      name:'三星',
      price:1000000
    },
    {
      name:'三星',
      price:1000000
    },{
      name:'三星',
      price:1000000
    }]
  }
  
}

</script>

<template>
<div>
  <h1>商品数量:{{store.count}}</h1>
  <ul> <li v-for='item in store.list'>{{item.name}}-----{{item.price}}</li></ul>
  <button @click="toggelState">替换state</button>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

5.4、重置state里面的数据

<script setup lang="ts">
//导入store的模块
import useMainStore from './store/index.ts'
//使用这个store
const store =useMainStore()

function resetClick() {
  store.$reset()
  
}
</script>

<template>
<div>
  <h1>商品数量:{{store.count}}</h1>
  <ul> <li v-for='item in store.list'>{{item.name}}-----{{item.price}}</li></ul>
  <button @click="resetClick">重置</button>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

5.5、$subscribe监听整个仓库的变化（state）

//监听整个仓库的变化
//mutation 数据变化的信息
store.$subscribe((mutation,state)=>{
  console.log('mutations:',mutation);
  console.log('state:',state); 
})

请添加图片描述

六、getter

import { defineStore } from 'pinia'
import axios from 'axios'
export default defineStore('main', {

    state: () => {
        return {
            count: 10,
            list: [{
                name: 'mac',
                price: 12000,
                num: 1

            },
            {
                name: 'macpro',
                price: 16000,
                num: 1

            }]
        }
    },


    //计算总价 
    getters: {
        sumPrice: (state) => {
            return state.list.reduce((pre, item) => {
                return pre + (item.price * item.num)
            }, 0)

        }
    },


}

)

//app.vue
 <h1>商品总价:{{store.sumPrice}}</h1>

在这里插入图片描述

七、action

axios 异步请求数据

    state: () => {
        return {
            count: 10,
            //储存shopcart列表数据
            shopcat_list:[],
            list: [{
                name: 'mac',
                price: 12000,
                num: 1

            },
            {
                name: 'macpro',
                price: 16000,
                num: 1

            }]
        }
    }
 //同步异步都可以
    actions: {
        async getShopcart() {
            // let result = axios.get('https:wwww.cpngx.cn/static/timu/timu.json')
            let result = axios.get('https://www.escook.cn/api/cart')
            console.log((await result).data.list);
            this.shopcat_list=(await result).data.list

        }
    }

在这里插入图片描述

调用getShopcart()获取数据循环渲染页面

//app.vue
  <h1>商品列表</h1>
  <ul> 
   <li v-for='item in store.shopcat_list'>{{item.goods_name}}-----{{item.goods_price}}------{{item.goods_img}}</li>
  </ul>
  <button @click="store.getShopcart()">获取异步数据</button>

在这里插入图片描述

七、 完整代码

//App.vue

<script setup lang="ts">
//导入store的模块
import useMainStore from './store/index.ts'
//使用这个store
const store =useMainStore()

function handelClick() {
  store.count++
  
}

//增加一个列表数据
function  patchFnClick() {
  store.$patch((state)=>{
    state.count+=10;
    state.list.push({
       name:'华为',
      price:12000
    })
  })
  
}

//替换state里面的状态
function toggelState() {
  store.$state={
    // shopcat_list:[],
    count:10000,
    list:[{
      name:'三星',
      price:1000000,
      num:1
    },
    {
      name:'三星',
      price:1000000,
      num:1
    },{
      name:'三星',
      price:1000000,
      num:1
    }]
  }
  
}




//重置state
function resetClick() {
  store.$reset()
  
}

//监听整个仓库的变化
//mutation 数据变化的信息
store.$subscribe((mutation,state)=>{
  console.log('mutations:',mutation);
  console.log('state:',state); 
})
</script>

<template>
<div>
  <h1>商品总价:{{store.sumPrice}}</h1>
  <h1>商品数量:{{store.count}}</h1>
  <ul> 
    <li v-for='item in store.list'>{{item.name}}-----{{item.price}}</li>
  </ul>
  <button @click="handelClick">增加</button>
  <button @click="patchFnClick">+10</button>
  <button @click="toggelState">替换state</button>
  <button @click="resetClick">重置</button>
  <button @click="store.getShopcart()">获取异步数据</button>

  <h1>商品列表</h1>
  <ul> 
   <li v-for='item in store.shopcat_list'>{{item.goods_name}}-----{{item.goods_price}}------{{item.goods_img}}</li>
  </ul>
  </div>
</template>

<style>

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>


//index.js
import { defineStore } from 'pinia'
import axios from 'axios'
export default defineStore('main', {

    state: () => {
        return {
            count: 10,
            shopcat_list:[],
            list: [{
                name: 'mac',
                price: 12000,
                num: 1

            },
            {
                name: 'macpro',
                price: 16000,
                num: 1

            }]
        }
    },


    //计算总价 index.js 用store调用就行
    getters: {
        sumPrice: (state) => {
            return state.list.reduce((pre, item) => {
                return pre + (item.price * item.num)
            }, 0)

        }
    },


     //同步异步都可以
    actions: {
        async getShopcart() {
            // let result = axios.get('https:wwww.cpngx.cn/static/timu/timu.json')
            let result = axios.get('https://www.escook.cn/api/cart')
            console.log((await result).data.list);
            this.shopcat_list=(await result).data.list

        }
    }

}

)

八、效果展示!

请添加图片描述

Qiuxuntao
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
uniapp+vue3+pinia框架（模块化+持久化存储）
06-15
uniapp+vue3+pinia框架 uniapp：导航栏双页切换 vue3+pinia：实例化+参数输出+方法调用+模块化+持久化存储 购买后任何问题请私信沟通或添加技术服务群咨询。
vue3 + pinia 持久化缓存
weixin_43512977的博客
06-30 427
文档 pinia 下载 main.ts src/store/rank.ts .vue 持久化 pinia 文档 pinia-plugin-persist 下载 main.ts 改造 src/store/rank.ts [Vue warn]: injection “Symbol(pinia)“ not found.
vue3使用pinia，并且持久化存储
liuli0927的博客
04-14 291
2.在src下创建一个store文件夹，在store文件夹下创建index.ts。3.在store文件夹下新建一个test.ts文件，里面就是你要是用的了。4.在main.ts中引用pinia。5.在页面上使用pinia。2.下载持久化存储插件。
vue3 :安装pinia 配置并使用
weixin_51614564的博客
11-25 887
2.接着我们对他做这个使用：在根目录新建一个store 文件夹。3.新建index.ts ,在这个文件里写入下面代码。4.倒出之后让pinia 生效，在mian.ts。例子：新建文件counter.ts。
vue3中如何安装Pinia（简单易懂）
程序研博客
12-01 994
以上步骤是在 Vue 3 中安装和配置 Pinia 的基本流程。在你的项目中创建 Pinia Store 文件，定义状态和操作。方法来获取 Pinia Store 的实例。Vue 3 版本对应的 Pinia 使用。）中配置并注册 Pinia 插件。在你的应用入口文件（通常是。实例，并在组件中使用它。
快速上手Pinia
weixin_48862362的博客
06-02 425
如果你之前使用过 vuex 进行状态管理的话，那么 pinia 就是一个类似的插件。它是最新一代的轻量级状态管理插件。按照尤雨溪的说法，vuex 将不再接受新的功能，建议将 Pinia 用于新的项目。 详情可查阅官方文档 1.简便，存储和组件变得很类似，你可以轻松写出优雅的存储。 2.类型安全，通过类型推断，可以提供自动完成的功能。 3.vue devtools 支持，可以方便进行调试。 4.Pinia 支持扩展，可以非常方便地通过本地存储，事物等进行扩展。 5.模块化设计，通过构建多个存储模块，可以让程序
pinia 使用
m0_50884068的博客
11-26 275
【代码】pinia 使用。
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
uni-app+Vue3+pinia+uview-plus搭建的项目包
12-28
uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-...
Vue3+Vite+TypeScript+Ant Design Vue+Pinia等主流技术的后台管理系统项目.zip
01-03
Vue3+Vite+TypeScript+Ant Design Vue+Pinia等主流技术的后台管理系统项目，支持keepalive和Vite自动生成路由
vue3整合pinia案例
12-14
本资源使用了vue3,实现了vue-router、pinia整合进vue3前端项目。可以从这个项目了解到pinia的初步入门，通过本demo，根据业务需要可实现多个vue页面共享数据。
用Pinia在vue3中实现axios请求
qq_49668888的博客
06-01 2205
简介：Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。不过相较于vuex又有所不同。主要体现在pinia在构建store中只用到state，getter，action就可以实现对axios的请求。2.在src下创建一个store文件夹，并在文件夹内创建一个index.js。6.到这就结束了，不知道有没有帮你解决问题呢 欢迎各位在评论区评论哦！4.main.js中引入创建好的pinia。
pinia
weixin_58155690的博客
02-03 183
支持选项式api和组合式api写法pinia没有mutations，只有：state、getters、actionspinia分模块不需要modules（之前vuex分模块需要modules）TypeScript支持很好自动化代码拆分pinia体积更小（性能更好）
Vue3最佳实践 第六章 Pinia,Vuex与axios,VueUse 1（Pinia）
zhtbs的博客
09-27 1225
在 Vue3 中项目中组件之间传递数据时，可以使用 Props 和 Emit，还可以使用 Provide/Inject 来代替 Props 和 Emit。Props 和 Emit 只能在具有父子关系的组件之间传递数据，所以层级越深，过程就越复杂。为了解决此类问题需要一种在所有组件之间共享数据的机制（State Management）。在原来的Vue世界中Vuex 以全局状态管理库着称，但是现在出现了一个新的存储库 Pinia，现在所有Vue3创建的新项目都建议使用 Pinia。
学习pinia并搭配json-server，axios，typescript实现一个购物车
浪头的博客
06-19 1377
介绍pinia的语法，购物车案例练习使用pinia
vue快速入门（五十）重定向
不起眼小菜菜的博客
05-03 420
注释很详细，直接上代码……
v-for中的key是什么作用
最新发布
qq_39196447的博客
05-06 254
在使用v-for进行列表渲染时，我们通常会给元素或者组件绑定一个key属性。这个key属性有什么作用呢?我们先来看一下官方的解释：key属性主要用在Vue的虚拟DOM算法，在新Inodes对比时辨识VNodes；如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法；而使用key时，它会基于key的变化重新排列元素顺序，并且会移除/销毁key不存在的元素；
前端Vue 后端FastApi 跨域 CORS
weixin_44656422的博客
05-06 302
前端是localhost:3000,后端是localhost:8000 ，就是跨域了。
Vue3 Pinia
03-14
Vue3 Pinia是一个状态管理库，专门为Vue3设计优化。它提供了一种简单而强大的方式来管理应用程序的状态，并且与Vue3的响应式系统紧密集成。 Pinia的核心概念是store，它类似于传统的Vuex中的module。每个store都...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值