vue3从零开始（终

最新推荐文章于 2024-09-15 00:30:13 发布

Robo12138

最新推荐文章于 2024-09-15 00:30:13 发布

阅读量279

点赞数

分类专栏： vue3 pinia 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/eilan_chiu/article/details/126862668

版权

本文详细介绍了如何在vue3项目中使用pinia进行路由跳转、购物车数据和登录状态管理。通过示例展示了pinia的安装、state、getters、actions的使用，并给出了在商品详情页添加购物车方法的具体实践。

摘要由CSDN通过智能技术生成

vue3从零开始（终

简介：本文将基于原来的代码进行添加到购物车的操作，
这里会使用到 vue-router 进行路由跳转，以及使用pinia 进行购物车数据，和登录
状态管理
本来我写的标题是快速上手vue3 但是仔细想来写的有点繁琐了于是更名成从零开始
跳转路由 /cart

<button class="cart-button  button-bottom" @click="">添加至购物车</button>

import { useRouter } from 'vue-router'
const router = useRouter()
//跳转购物车
const routerToCart = () => {
  if(window.confirm("添加成功，是否前往购物车查看")){
    router.push({name: "cart"})
  }
  
}

这里使用router.push 方法进行路由跳转
也可以使用router.go(-1) 返回上一页

六、pinia

使用 pinia 进行公共数据管理
购物车的数据一般会在多个页面用到，所以我们要将其作为共享数据进行管理

1、pinia安装

yarn add pinia

//main.js
import { createPinia } from 'pinia'

app.use(pinia)

定义store 使用 defineStore

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => { //两个参数，一个id （name） 和一个回调函数
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

  return { count, doubleCount, increment }
})

使用state

import { defineStore } from 'pinia'

const useStore = defineStore('storeId', {
  // 推荐使用 完整类型推断的箭头函数
  state: () => {
    return {
      // 所有这些属性都将自动推断其类型
      counter: 0,
      name: 'Eduardo',
      isAdmin: true,
    }
  },
})

访问state

const store = useStore()

store.counter++

重置状态

const store = useStore()

store.$reset()

使用Getters

export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  getters: {
    doubleCount: (state) => state.counter * 2,
  },
  //使用this 访问整个store
    doublePlusOne(): number {
      return this.counter * 2 + 1
    },
})

store可以直接访问getters’