Vue状态管理

- Pinian状态管理工具

概念：

Pinia是Vue3的存储库，允许跨组件/页面共享状态。一个轻量级的状态管理库，提供简单的API来管理应用程序的状态。适合中小型应用和低复杂的vue.js项目。

优点：

1.更加轻量级：体积小（约1KB），不需要Vuex的一些复杂模块（mutations）

2.更加简单易用：Pinia的API设计使用了Vue3的新特性，如Composition API

3.更加灵活：提供了更加灵活的管理状态方式，支持多个store实例，而Vuex只支持一个store实例

4.对typescript更友好：与ts一起使用时有可靠的类型推断

缺点：

1.Pinia是一个比较新的状态管理库，存在一些未知问题和限制

2.生态系统可能不够完善，需要花费较多时间解决问题

代码：

1.安装
    npm i pinia
2.创建stores文件夹,index.ts
    import {createPinia} from 'pinia'
3.创建实例
    const store = createPinia()
4.暴露出去
    export default store
5.在main.ts中集成
    引入store
    import store form ''
6.集成
    app.use(store)
7.在store文件夹中定义一个user

import {defineStore} from 'pinia'
    export const userStore = defineStore('user',{
        state:()=>{
            return{
                user:{}
            }
        },
        actions:{
            saveUser(user){
                this.user = user
            }
        },
        getters:{
            user:(state) = >state.user
        }
    })

8.在需要的页面引入
    Impor userStore

- Vuex状态管理工具

概念：

Vuex是一个专为Vue.js应用程序开发的状态管理模式+库。采用集中存储管理应用的所有组件状态，并以响应的规则保证状态以一种可预测的方式发生变化。

Vuex可以帮助我们共享状态，将多个组件共享的变量全部存储在一个对象里面，并有更多的中间件和插件，适合在开发大型单页应用中使用，能够处理复杂需求。

• 状态管理应用:

  • 状态：驱动应用的数据源；

  • 视图：以声明的方式将状态映射到视图；

  • 操作：响应在视图上的用户操作导致状态变化；

优点：

1.更加成熟：Vuex是一个比较成熟的状态管理库，已经被广泛应用和测试

2.更加稳定：经过了多个版本的迭代更新，稳定性好

3.功能强大：提供了高级功能，可以处理更复杂的状态管理需求

缺点：

1.学习成本高：Vuex概念复杂，学习难度较大

2.状态管理繁杂：本身有复杂的概念和API

代码：

1.安装
    npm install vuex@next --save
 或者 yarn add vuex@next --save
​
import Vue from 'vue'
import Vuex from 'vuex'
 
//2.安装插件
Vue.use(Vuex)
 
//3.创建对象
const store = new Vuex.Store({
  state:{
    counter:1000
  },
  mutations:{
 
  },
  actions:{
 
  },
  getters:{
 
  },
  modules:{
    
  }
})
//4.导出使用
export default store

- Vue-Router路由管理工具

一、概念：

Vue Router是Vue.js官方的路由管理器。和Vue.js的核心集成，方便构建单页面应用。

二、API参考

Router

router是管理路由的路由器，包含所有的路由规则和层级关系。通过new VueRouter创建

const router = new VueRouter({
  routes: [
    { path: '/home', name: 'home', component: Home }
  ]
})

router和route的区别

• route代表当前激活的路由信息,是路由的一部分。包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。

• router是管理路由的路由器,包含了所有的路由规则和层级关系。

• this.$route访问当前激活的路由信息

  • $route.path，获取当前路由路径

  • $route.params，获取url查询参数

• this.$router访问路由器对象

  • push

    this.$router.push方法会跳转路径，向history添加新的记录

  • go

    this.$router.go(-1)页面路由跳转后退

  • replace

    this.$router.replace("/")跳转页面，不会保留记录，一般做404页面

Router-Link

<router-link>组件（<a>标签）支持用户在具有路由功能的页面中点击导航。通过to属性指定目标地址，默认渲染成带有正确链接的<a>标签，通过tag属性生成别的标签。

<router-link to="/home">首页</router-link>
渲染结果
<a href="/home">首页</a>
----
<router-link tag="li">li</router-link>
渲染结果
<li>li</li>

Router-View

<router-view>组件是一个function组件，渲染路径匹配到的视图组件。可以配合keep-alive使用，将组件切换过程中的状态保存在内存中，防止重新渲染DOM，减少消耗，提升体验。

<div id="app">
    <keep-alive>
      <router-view/>
    </keep-alive>
  </div>

应用代码

// 1. 定义路由组件.
import Home from "/pages/home.vue"
import About from "/pages/about.vue"
// 2. 定义路由
const routes = [
  { path: '/home', name:"home",component: Home },
  { path: '/about',name:"about" component: About },
]
​
// 3. 创建路由实例并传递 `routes` 配置
const router = new VueRouter({
  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: VueRouter.createWebHashHistory(),
  routes, // `routes: routes` 的缩写
})
​
// 5. 创建并挂载根实例
const app = Vue.createApp({})
​
//整个应用支持路由。
app.use(router)
​
app.mount('#app')