手把手教你怎样在vue3中使用redux

前言
现在的web应用基本上都走上了数据驱动的道路，而数据状态的管理则理所当然成为了项目开发的核心，所以理论上只要统一状态层，view渲染可以随意更换框架和模式。

而我们在做项目的时候大部分都是vue用vuex。react用redux。以至于很多同学都以为所有的状态管理容器是和页面渲染框架一一绑定的，所以突然想实验一下用edux做状态管理，而vue只做一个简单的页面渲染器

思路

我们知道redux的state 只是一个普通的js对象，是无法感知视图的。redux的整套流程和vue的渲染驱动机制其实是相互独立的。不像vuex本身就是一个vue实例，state属性本身就是reactive的，声明在template里，属性的set的方法会自动收集依赖，也就是vue本身的那套双绑模式。所以vuex不需要做任何操作天然的支持vue，或者说vuex就是一个实现了flux思想的全局vue。

所以就像官网说的，我们需要做一些简单绑定让redux接入到vue的数据渲染模式中，

然而这个网址已经失效。。。。￣□￣｜｜

不过redux官网也有通用的ui驱动方案

大致思路就是在我们dispatch action 之后的回调中对ui层进行更新。不过如果每次state发生变化都对vue进行$forceUpdate不免太僵硬且浪费性能了。

参照react-redux将当前组件需要的参数从redux的state中接管为react组件的状态（props），让组件本身的数据代为驱动ui的更新。

而且vue本身的data就是reactive的，所以只需要将redux中的state注入到vue的data中，在redux的subscribe回调中根据state对data进行修改就可以顺利的驱动vue进行页面渲染。
所以只需要在vue组件挂载之前将state注入到data中即可，如果是vue2，我们只能用mixin将数据混入进组件，不过在vue3中我们则可以用composition component 在setup中进行注入

示例
描述：做一个简单的小功能进行测试，点击sider内页面标签将页面名分发到state中，再驱动header页面更新。

效果：

步骤：

1 构建redux store

import {
    createSlice, PayloadAction } from '@reduxjs/toolkit'
export interface GlobalState {
   
    currentRoute: string,
}
// 初始化state
const initialState: GlobalState ={
   
    currentRoute: '应用程序管理',
}
export const globalSlice = createSlice({
   
  name: 'global',
  initialState,
  reducers: {
   
    updata: (state, action: PayloadAction<string>