1、Vue3固定定位的元素怎么设置宽度和父元素一样？2、Vue3怎么使用store的数据？3、深度监听watch数据？4、Vue3怎么使用路由router跳转?

问题一、Vue3固定定位的元素怎么设置宽度和父元素一样？

使用 fixed 进行布局的元素，在一般情况下会相对于屏幕视窗来进行定位。但是如果父元素的 transform, perspective 或 filter 属性不为 none 时，position为fixed 的元素就会相对于父元素来进行定位。

问题：当在一般情况下，怎么保证元素宽度跟其他元素宽度一样呢？

答案：通过设置left和right即可（实现随窗口大小会自动变化宽度）

1、效果图（第一个是固定定位，其他是普通元素）

注意观察元素与左右两边距离

2、代码实现（antd）

<a-card :bordered="false" style="position: fixed; z-index: 1" class="fixedStyle">
		<p>这个是固定定位的元素</p>
		<p>这个是固定定位的元素</p>
		<p>这个是固定定位的元素</p>
	</a-card>
	<a-card :bordered="false" style="margin-top: 170px">
		<p>这个是普通元素</p>
		<p>这个是普通元素</p>
		<p>这个是普通元素</p>
	</a-card>
	<a-card :bordered="false" style="margin-top: 10px">
		<p>这个是普通元素</p>
		<p>这个是普通元素</p>
		<p>这个是普通元素</p>
	</a-card>
<style scoped>
fixedStyle{ //具体数值根据需要进行设置
		left: 260px; 
		right: 12px;
	}
	</style>

问题二、Vue3怎么使用store中的数据？

1、首先从vue引入computed

import { computed,} from ‘vue’

2、接着从vuex引入useStore

import { useStore } from ‘vuex’

3、开始使用

//取数据
let store = useStore() //定义store
let styCla = computed(() => store.state.global.ismobile) // 引入数据（此处是global模块中的ismobile）
console.log( styCla.value, 'store数据') // 使用

 // 处理commit
handleMutation: () => {
   store.commit(...)
 }
 
 // 处理dispatch
 handleAction: () => {
   store.dispatch(...)
 }

4、扩展（创建带有多个模块store）

import { createStore } from 'vuex'

import global from './modules/global'  //模块中正常写法,跟vue2一样
import viewTags from './modules/viewTags' //模块中正常写法,跟vue2一样
import search from './modules/search' //模块中正常写法,跟vue2一样
// 自动import导入所有 vuex 模块
export default createStore({
	modules: {
		global,
		viewTags,
		search
	}
})

问题三、深度监听数据(vue3写法)

深度监听 ，添加
{ immediate: true, deep: true }
即可

watch(
		() => styCla.value,
		(val) => {
			if (val) {
				fixedStyle.value = 'fixedStyleSmall'
			} else {
				fixedStyle.value = 'fixedStyleBig'
			}
		},
		{ immediate: true, deep: true }
	)

问题四、Vue3怎么使用路由router跳转

1、从vue-router引入useRouter

import { useRouter } from ‘vue-router’

2、使用

const router = useRouter() // 创建router
const jump = () => {   
		router.push({
			path: '/aaa'//路由地址
		})
	}
//跳转
let juspDet= () => {
	jump()
}