vue3 开发拓展工具

vue3 开发拓展工具

VueCLI 构建工具

• 删除 Vue-cli
  npm uninstall vue-cli -g yarn global remove vue-cli
• 安装 vue-cli
  最新版：npm install -g @vue/cli
  固定版： npm install -g @vue/cli@4.5.9
  创建项目：vue create demo(项目名称)
  启动项目： npm run serve
  安装项目依赖： npm install

Vue-Router 路由

作用：根据 URL 的不同，展示不同的内容
<router-link to="/">Home</router-link> 模板中使用的路由跳转标签
<router-view/>标签， 负责展示当前路由对应的组件内容
异步加载路由：component:( ) => import('../xxxx')

VueX 语法

作用: Vuex 数据管理框架，VueX 创建了一个全局唯一的仓库，用来存放全局的数据。

• 声明数据：state:{name:'test'}
• 获取数据：computed:{myName(){return this.$store.state.name;}}
• 修改数据
  • 步骤 1. dispatch 方法，派发 action，名字叫做 change：this.$store.dispatch('change')
  • 步骤 2.感知到 change，这个 action，执行 store 中 actions 下面的 change 方法
    编写/store/index.js 下 actions: change(){console.log('test.com')}
    VueX 的 store 自动感知到你派发出了一个叫做 change 的 action，并执行 action 方法
  • 步骤 3.commit 提交一个叫做 change 的数据改变
    在/store/index 下 actions 里编写:change( ){this.commit('change')}
  • 步骤 4：mutation 感知到提交的 change 改变，执行 change 方法
    在/store/index 下 muations 里编写：change(){console.log('mutation')}
  • 步骤 5：在 Mutation 里修改数据
    在/store/index 下 muations 里编写：change(){this.state.name="help"}
    PS:在 mutation 里面只允许写同步代码，不允许写异步代码。如果要写异步操作，可以在 actions 里进行。

Pinia

• Pinia 和 Vuex 的区别
  与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的仪式，提供了 Composition-API 风格的 API。
  Pinia 与 TypeScript 一起使用时具有可靠的类型推断支持

使用 Pinia

• 安装 Pinia
  yarn add pinia
  npm install pinia
• 创建 pinia 文件

  import { createPinia } from 'pinia'
  const pinia = createPinia()
  export default pinia
  

• main.js 导入并引用

import { createApp } from 'vue'
import App from './App.vue'
import pinia from './stores'
createApp(App).use(pinia).mount('#app')

• pinia 的状态管理

//定义关于counter的store
import { defineStore } from ‘pinia’
//defineStore 是返回一个函数 函数命名最好有use前缀，根据函数来进行下一步操作
const useCounter = defineStore('counter',{
	state: () => {
		count:99
	}
})
export default useCounter

• 调用 pinia，获取 pinia 状态

<template>
  <div class="home">
    <h2>Home View</h2>
    <h2>count: {{ counterStore.count }}</h2>
  </div>
</template>

<script setup>
  import useCounter from '@/stores/counter';

  const counterStore = useCounter()

</script>
<style scoped>
</style>

pinia 解构出来的 state 也是可以调用，但会失去响应式，需要 toRef 或者 pinia 自带 storeToRefs

操作 State

默认情况下，可以通过 store 实例访问状态来直接读取和写入状态

const counterStore = useCounter()

counterStore.counter++
counterStore.name = 'coderWhy'

可以调用 store 上的$reset()方法将状态重置到其初始值

const counterStore = useCounter()
conterStore.$reset()

除了直接用 store.counter++修改 store，还可以调用$patch

const counterStore = useCounter()

counterStore.$patch({
	counter:100,
	name:'kobe'
})

可以通过将其$state 属性设置为新对象替换 Store 的整个状态

conterStore.$state = {
counter:1,
name:'why'
}

Getters 相当于 Store 的计算属性：

它们可用 defineStore()中的 getters 属性定义
getters 中可以定义接受一个 state 作为参数的函数

expoer const useCounter = defineStore('counter',{
	state: () => {
		counter:100,
		firstname:'kobe'
	},
	getters:{
		doubleCounter(state){
			return state.counter *2
		}
	}
})

访问 Store 里 getters 方法

expoer const useCounter = defineStore('counter',{
	state: () => {
		counter:100,
		firstname:'kobe'
	},
	getters:{
		doubleCounter(state){
			return state.counter *2
		}
		doubleCounterAdd(){
			//this指向store
			return this.doubleCounter +1
		}
	}
})

Actions 相当于组件中的 methods，可以使用 defineStore()中的 actions 属性定义

expoer const useCounter = defineStore('counter',{
	state: () => {
		counter:100,
		firstname:'kobe'
	},
	getters:{
	//调用其它Store
		doubleCounter(state){
			return function (is) {
				return state.id + id
			}
		}
	},
	actions:{
		increment(){
			this.counter++
		},
		//传参
		incrementnum(num){
			this。counter += num
		}
	}
})

和 getters 一样，在 action 中可以通过 this 访问整个 store 实例：

function increment(){
	//调用
	counterStore.increment()
}
function incrementnum(){
	counterStore.increment(10)
}

Actions 中是支持异步操作的，并且我们可以编写异步函数，在函数中使用 await

actions:{
	async fetchHome(){
		//???请求
		const res = await fetch('?????')
		const data = await res.json()
		console.log('data',data)
		return data
	}
}

cosnt counterStore = useCounter
counterStore.fetchHome().then(res => {
	console.log(res)
})

Vetur

VSCode 中的代码提示工具