Vue3学习笔记Day10 如何使用Vuex进行数据跨组件交互？

Web应用的三大件:

• 组件
• 数据
• 路由

Vuex的诞生

那多个组件之间的数据通信是如何实现的呢？常见方案：定义全局变量，任何组件需要数据就去全局变量获取。

window._store = {}

如下图所示：

这里存在一个问题 并不是响应式的，还要我们自己手动用ref reactive 搞成响应式数据。这就是 Vuex 诞生的雏形了。

Vuex是啥？

可以这样来理解，项目比作公司，数据是公司资产，那么Vuex就是资产的统一管理者。集中式存储管理应用的所有组件的状态。

来体验一下Vuex。

执行下面命令

mkdir src/store

npm install vuex@next

我们用 index.js 里的store 来创建一个数据存储。

import { createStore } from 'vuex'

const store = createStore({
  state () {
    return {
      count: 666
    }
  },
  mutations: {
    add (state) {
      state.count++
    }
  }
})

export default store

现在就有了数据源 store，有一个变量count,还有一个方法修改count的值。现在还需要在src/main.js中用.use(store)把这个数据源注册一下。

const app = createApp(App)
app.use(store)
    .mount('#app')

现在可以使用这个数据源了。到src/components下建一个Count.vue组件，然后输入下面代码：

<template>
<div @click="add">
    {{count}}
</div>
</template>

<script setup>
import { computed } from 'vue'
import {useStore} from 'vuex'
let store = useStore()
let count = computed(()=>store.state.count)

function add(){
    store.commit('add')
}
</script>

这里 初始化和修改函数和之前比较有2点变化：

1. count不是从ref 里直接定义了，这里用计算属性返回store.state.count。
2. add函数 也不能直接操作 store.state.count++了，要告知大管家Vuex，让它去修改数据。

那到底什么情况下用Vuex管理数据，什么情况下直接把数据放到组件内部呢？我理解是：数据是组件内私有的，就在组件内部管理，如果需要跨组件，跨页面共享的就交给大管家Vuex去管理。（有点类似公司里多部门沟通的感觉，部门内部的数据没必要暴露，跨部门沟通的数据 大家可以共享到同一个地方。）

Pinia

Vuex由于API的设计问题，对TS的类型推导比较麻烦。为了解决这个问题，Pinia 应运而生。

1. Pinia 不需要 Vuex 自定义复杂的类型去支持 TypeScript，天生对类型推断就非常友好，
2. 对 Vue Devtool 的支持也非常好，是一个很有潜力的状态管理框架。