Web应用的三大件:
- 组件
- 数据
- 路由
Vuex的诞生
那多个组件之间的数据通信是如何实现的呢？常见方案：定义全局变量，任何组件需要数据就去全局变量获取。
代码语言：javascript复制window._store = {}
如下图所示：
这里存在一个问题 并不是响应式的，还要我们自己手动用ref reactive 搞成响应式数据。这就是 Vuex 诞生的雏形了。
Vuex是啥？
可以这样来理解，项目比作公司，数据是公司资产，那么Vuex就是资产的统一管理者。集中式存储管理应用的所有组件的状态。
来体验一下Vuex。
执行下面命令
代码语言：javascript复制mkdir src/store
npm install vuex@next
我们用 index.js 里的store 来创建一个数据存储。
代码语言：javascript复制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)把这个数据源注册一下。
代码语言：javascript复制const app = createApp(App)
app.use(store)
.mount('#app')
现在可以使用这个数据源了。到src/components下建一个Count.vue组件，然后输入下面代码：
代码语言：javascript复制<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点变化：
- count不是从ref 里直接定义了，这里用计算属性返回store.state.count。
- add函数 也不能直接操作 store.state.count 了，要告知大管家Vuex，让它去修改数据。
那到底什么情况下用Vuex管理数据，什么情况下直接把数据放到组件内部呢？我理解是：数据是组件内私有的，就在组件内部管理，如果需要跨组件，跨页面共享的就交给大管家Vuex去管理。（有点类似公司里多部门沟通的感觉，部门内部的数据没必要暴露，跨部门沟通的数据 大家可以共享到同一个地方。）
Pinia
Vuex由于API的设计问题，对TS的类型推导比较麻烦。为了解决这个问题，Pinia 应运而生。
- Pinia 不需要 Vuex 自定义复杂的类型去支持 TypeScript，天生对类型推断就非常友好，
- 对 Vue Devtool 的支持也非常好，是一个很有潜力的状态管理框架。
