创建

引入

import { defineStore } from 'pinia'

定义，把变量变量暴露出去

export const useShopInfoStore = defineStore('shop', () => {
  let shopInfo = ref()
  let exInfo = (val: any) => {
    shopInfo.value = val
  }
  return {shopInfo,exInfo}
})

使用

引入

import { useShopInfoStore } from '../stores/counter'
let Shopstore = useShopInfoStore()

使用

Shopstore.shopInfo

如果需要结构要使用storeToRefs()来保持数据的响应式

引入storeToRefs

import { storeToRefs } from 'pinia'
let { shopInfo } = storeToRefs(Shopstore)

这样就可以不需要Shopstore.shopInfo拿到里面的值，而是直接shopInfo就可以拿到里面的值

方法的使用，直接Shopstore.exInfo(val) 传进去一个形惨，pinia里面会接受，并且根据逻辑进行处理。

这是一个备受期待的互联网技术！如果你对网页开发感兴趣，那你肯定听说过 Vue，它是一个流行的前端框架，用于构建灵活且高效的用户界面。

那么，Vue 3究竟有什么新奇的东西呢？首先，让我告诉你一个非常重要的概念：Composition API（组合 API）。Vue 3 引入了这个全新的 API，它让你能够更好地组织和重用代码。以前，在 Vue 2 中，我们可能需要使用 mixins 和高阶组件等方式来实现代码重用，但是这些方式有时候会让代码变得难以理解和调试。而 Composition API 则采用了一种更加直观的方式，让你可以根据逻辑功能（而不是组件）对代码进行组合，这样可以更加灵活和可读性。

除了 Composition API，Vue 3 还带来了更强大的性能优化。现在，Vue 3 使用 Proxy 代替了 Object.defineProperty 来实现响应式系统，这使得数据的变化能够更加高效地追踪和更新。这意味着，当你改变一个数据时，Vue 3 能够更快地检测到变化并且只重新渲染受到影响的部分，从而提高了应用程序的性能。

另外一个令人兴奋的功能是 Vue 3 的虚拟 DOM（Virtual DOM）改进。Vue 3 在虚拟 DOM 的实现上进行了优化，它在渲染和更新时能够更加高效地处理 DOM 的操作，进一步提升了应用程序的性能。

总而言之，Vue 3 给我们带来了更加强大和易用的工具，让我们能够更好地构建现代化的互联网应用程序。无论你是前端开发新手还是经验丰富的工程师，Vue 3 都能为你带来更高效和愉悦的开发体验

1.首先配置路径信息，已经单独写过一篇了 点击前往

2.引入包文件

import { useRouter } from 'vue-router'

3.定义变量接一下useRouter实例

let router = useRouter()

4.使用router.push() 进行跳转（）里面为path地址

router.push('/index')

在Vue项目中，你可以通过以下步骤来使用jsconfig.json文件

1. 在你的Vue项目的根目录下创建一个名为jsconfig.json的文件。

2. 在jsconfig.json中添加以下配置：

{
  "compilerOptions": {
    "target": "es6",
    "module": "esnext",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

上述配置的含义是：

• target：指定编译器的目标版本，这里设为ES6。
• module：指定模块的导入导出规范，这里设为ES模块。
• baseUrl：指定相对于jsconfig.json文件的路径。
• paths：用于设置别名，例如@代表src文件夹，可以根据实际情况进行配置。
• exclude：指定需要排除的文件或文件夹，这里排除了node_modules和dist文件夹。

3. 保存jsconfig.json文件。

4. 接下来，你可以在你的Vue项目中使用别名来引用模块。例如，如果你有一个在src文件夹下的components文件夹，并且你在components文件夹中有一个Header.vue组件，你可以使用别名来引用它：

import Header from '@/components/Header.vue';

这里的@符号是之前在jsconfig.json中设置的别名，它指向了src文件夹，所以@/components/Header.vue实际上指向了src/components/Header.vue文件。

需要注意的是，jsconfig.json文件只在开发过程中起作用，对于构建打包后的代码是没有影响的。如果你使用的是Webpack等打包工具，你可能还需要相应的配置来解析别名。

vuex的五个状态

//1.存储数据
  state: {

  },

//2.修改数据
  mutations: {

  },

3.运算属性
  getters: {

  },

4.//异步（发送请求） 
  actions: {

  },

5.模块化
  modules: {

  }

使用方法:

存储数据：

  state: {
    name:'张三',
    infodata:{},
  },

访问数据

this.$store.state.name

//推荐在计算属性里面访问

    computed: {
        x_name() {
            return this.$store.state.name
        }
    }

修改数据

定义一个方法，接受2个参数，第一个指向state,第二个是传入的值

  mutations: {
    changname(state, val) {
      state.name = val
    },
    data(state,val){
        state.infodata=val
    }
  },

触发事件通过this.$store.commit('changname', '李四')进行修改，传入2个参数，第一个是函数名，第二个修改的参数会被val接收。

代码示例

<button @click="a">点击发送修改/button>
<script>
export default {
       methods: {
          a() {
            this.$store.commit('changname', '野马')
        }
    },
}

发送请求

     //异步（发送请求） 
    //在顶部引入：import { $_ShopEeller } from '@/apis/index.js'
  actions: {
    async info (infos){ //infos,用于触发mutations里面修改方法
        let res = await $_ShopEeller()
        infos.commit('data',res)//data 定义修改的方法，res=值
    }
  },

页面调用请求

    created() { 
        //页面初始化触发actions里面请求info
        this.$store.dispatch('info')
    },

计算属性

  getters: {
    shoplist(state) {
      let newarr = []
      for (let key of state.goodlist) {
        for (let chil of key.foods) {
          if (chil.valueNum > 0) {
            newarr.push(chil)
          }
        }
      }
      return newarr
    }
  },

调用方法

在计算属性computed内调用，方法：$store.getters.shoplist 有利于性能，当引用的数据发生改变才会重新计算，有缓存性，
接收一个参数，指向state（vuex数据存储的地方）通过state.名字可以访问到，state里面的数据。

    computed: {
        numzj() {
            return this.$store.getters.shoplist
        },
    },

解决办法:

public下面的index.html改成index.ejs就行了

vue.set 是 Vue.js 提供的一个全局方法，用于在响应式对象中新增属性或修改数组的索引值。vue.set 是为了解决 Vue.js 在默认情况下无法检测到对象属性的新增或数组索引的变化而引入的。

vue.set 方法接受三个参数：目标对象、属性名或数组索引、属性值。其用法如下：

Vue.set(target, propertyName/index, value)

• 参数一:需要更新的数组或对象
• 参数二:是数组的下标或者对象的属性名，
• 参数三:是更新的内容

修改数组的方法：（修改下标为2的元素为D）

let arr = ["a","b","c"];
this.$set(arr, 2, "d");

修改对象的方法：(修改name属性值为：李四）

let obj = {
  name: "张三",
  age: 18,
  sex: "男"
};
this.$set(obj, "name", "李四");

新增对象的方法：(修新增身高属性）

this.$set(obj, "height", 180);

{
  name: "李四",
  age: 18,
  sex: "男",
  height: 180
}

新增数组元素

// 假设data中有一个数组变量名为myArray
// 初始化数组
this.myArray = ['item1', 'item2', 'item3'];

// 添加新元素
this.$set(this.myArray, this.myArray.length, 'newItem');

// 现在myArray为['item1', 'item2', 'item3', 'newItem']

Vue中有很多表单事件可以用来监听表单元素上的交互事件，常见的表单事件包括：

1. input：监听输入框输入的事件，包括键盘输入和复制粘贴操作；

2. change：监听表单元素的值改变的事件，例如下拉框、单选框或复选框的选择；

3. submit：监听表单提交时的事件；

4. blur：在一个元素失去焦点时触发该事件，例如离开输入框；

5. focus：在一个元素获得焦点时触发该事件，例如标签被点击或通过Tab键移动到元素上。

与这些事件相对应，Vue也提供了对应的事件处理函数，你可以在Vue组件中使用这些事件的处理函数来响应用户的操作。下面是一些示例：

<template>
  <div>
    <input v-model="message" @input="inputHandler" type="text">
    <span>输入内容: {{ message }}</span>

    <select v-model="selected" @change="changeHandler">
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
    </select>
    <span>选择的内容: {{ selected }}</span>

    <form @submit.prevent="submitHandler">
      <input type="text">
      <button type="submit">提交</button>
    </form>

    <input type="text" @blur="blurHandler">
    <input type="text" @focus="focusHandler">
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      selected: ''
    }
  },
  methods: {
    inputHandler: function(event) {
      console.log(event.target.value); //input值发生改变执行
    },
    changeHandler: function(event) {
      console.log(event.target.value);
    },
    submitHandler: function() {
      console.log('提交表单');
    },
    blurHandler: function() {
      console.log('失去焦点');
    },
    focusHandler: function() {
      console.log('获得焦点');
    }
  }
}
</script>