vite vue-router和pinia使用

【一】安装vue-router

npm install -S vue-router@4
npm install vue-router@4 --save

【二】配置vue-router

【1】main.js

import {createApp} from 'vue'
// css只要引入，全局都生效
import './style.css'
// 使用vue-router
import router from './router'
import App from './App.vue'

createApp(App).use(router).mount('#app')

【2】App.vue

<template>
  <router-view></router-view>
</template>

【3】router/index.js

import { createRouter, createWebHashHistory } from 'vue-router';
import HomeView from "../views/HomeView.vue";
import about from "../views/About.vue";
import parent from "../views/parent.vue";
import axios1 from "../views/axios1.vue";
import axios2 from "../views/axios2.vue";
import login from "../views/login.vue";


const routes = [
  {
    path: '/',
    name: 'Home',
    component:HomeView ,
  },
  {
    path: '/about',
    name: 'about',
    component:about ,
  },
  {
    path: '/parent',
    name: 'parent',
    component:parent ,
  },
  {
    path: '/axios',
    name: 'axios',
    component:axios1 ,
  },
  {
    path: '/axios2',
    name: 'axios2',
    component:axios2 ,
  },
    {
      path: '/login',
      name: 'Login',
      component:login
    },






];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});
router.beforeEach(async (to, from) => {
  if (
      // 检查用户是否已登录
      !localStorage.getItem('token') && to.name !== 'Login'
  ) {
    // 将用户重定向到登录页面
    return { name: 'Login' }
  }
})
localStorage.setItem('token', 'asda.asdad.asdasd')
export default router;

【三】安装pinia

npm install pinia

【四】配置pinia

【1】main.js

import {createPinia} from 'pinia'

const pinia = createPinia()
createApp(App).use(router).use(pinia).mount('#app')

【2】store/counter.js

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
    //1 定义变量
    state: () => {
        return {
            count: 0,
            hobby:'篮球'
        }
    },
    //2 这里面写方法，与后端交互或逻辑判断，再操作数据
    actions: {
        increment(good_id) {
            // 跟后端交互--》把good_id--》真正加购物车
            this.count++
        },
        changeHobby(hobby){
            this.hobby=hobby
        }
    },

    //3 getter-->获取数据
    getters: {
        getCount(){
            return this.count
        },
    },
})import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
    //1 定义变量
    state: () => {
        return {
            count: 0,
            hobby:'篮球'
        }
    },
    //2 这里面写方法，与后端交互或逻辑判断，再操作数据
    actions: {
        increment(good_id) {
            // 跟后端交互--》把good_id--》真正加购物车
            this.count++
        },
        changeHobby(hobby){
            this.hobby=hobby
        }
    },

    //3 getter-->获取数据
    getters: {
        getCount(){
            return this.count
        },
    },
})

【四】使用

• HomeView.vue

<template>
  <div class="top">
    <ShoppingCard></ShoppingCard>
    <el-table
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName"
    >
      <el-table-column prop="name" label="名字" width="180"/>
      <el-table-column prop="price" label="价格" width="180"/>
      <el-table-column prop="count" label="数量"/>
      <el-table-column label="加入购物车">
        <button @click="handleAdd(good_id)">加入购物车</button>
      </el-table-column>

    </el-table>
  </div>

</template>

<script lang="ts" setup>
import ShoppingCard from "../components/shoppingCard.vue";
import {useCounterStore} from '../store/counter'
let counter=useCounterStore()

interface User {
  name: string,
  price: string,
  count: string
}
function handleAdd(good_id) {
  //counter.count++
  counter.increment(good_id)
}
const tableRowClassName = ({
                             row,
                             rowIndex,
                           }: {
  row: User
  rowIndex: number
}) => {
  if (rowIndex === 1) {
    return 'warning-row'
  } else if (rowIndex === 3) {
    return 'success-row'
  }
  return ''
}

const tableData: User[] = [
  {
    name: '书包',
    price: '100',
    count: '10',
  },
  {
    name: '电脑',
    price: '6000',
    count: '5',
  },
  {
    name: '手机',
    price: '4000',
    count: '2',
  },
]

</script>

<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}

.top {
  display: flex;
  flex-direction: column;
  justify-content: center;

}
</style>

• 组件 shoppingCard.vue

<script setup>
import ShoppingCard from "../components/shoppingCard.vue";
import {useCounterStore} from '../store/counter'
let counter=useCounterStore()

</script>

<template>

  <h1>购物车</h1>
  <p>数量：{{counter.getCount}}</p>

</template>

<style scoped>
</style>

• 注意

• getter可以写成箭头函数

  //3 getter-->获取数据
  getters: {
      getCount:(state)=>{
          return state.count
      },
  },