Vue 状态管理 Vue CLI

Vue 状态管理 & Vue CLI

1、状态管理
2、集中状态管理
- 2.1 Vuex
- - 2.1.1 Vuex核心概念
  - 2.1.2 Vuex Store实例
  - 2.1.3 Vuex Getter
  - 2.1.4 Vuex Mutation
  - 2.1.4 Vuex Actions
  - 2.1.4 Vuex Module
- 2.2 Pinia
- - 2.2.1功能增强
3、Vuex 实现原理
4、Pinia 实现原理
5、CLI
- 5.1 实现

1、状态管理

将一个数据变为状态的方法：

ref
reactive
provide + inject，深层状态传递
Vuex、Pinia，集中状态管理
eventbus，状态管理，响应式数据解决不了的问题，我们尝试使用发布订阅模式来解决

怎么选择：

如果是组件内部状态、父子组件状态管理，选择 ref、reactive、computed
如果是深层组件状态，选择 provide + inject 来处理
- 换肤、主题
- 国际化
跨组件、跨模块的状态，选择 vuex、Pinia

2、集中状态管理

在 Vue 最重要就是数据驱动和组件化，每个组件都有自己 data ,template 和 methods。data是数据，我们也叫做状态，通过 methods 中方法改变状态来更新视图，在单个组件中修改状态更新视图是很方便的。
当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

多个视图依赖于同一状态。
来自不同视图的行为需要变更同一状态。

2.1 Vuex

2.1.1 Vuex核心概念

Action：响应在视图上的用户输入导致的状态变化。
State：驱动应用的数据源；
Mutation(在pinia中被取消)
View：以声明方式将状态映射到视图；
Module：数据模块

ps: react：action -> reducer -> state -> view

在这里插入图片描述

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

2.1.2 Vuex Store实例

import { createStore } from 'vuex';

const defaultState = {
  count: 0,
};

// Create a new store instance.
export default createStore({
  state() {
    return defaultState;
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  actions: {
    increment(context) {
      context.commit('increment');
    },
  },
});

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

createApp(App).use(store).mount('#app');

Vue 组件中展示状态

 // 创建一个 Counter 组件
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return store.state.count
    }
  }
}

mapState 辅助函数
当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性：

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

对象展开运算符
对象展开运算符(opens new window)，将多个对象合并为一个，将最终对象传给 computed 属性

computed: {
  localComputed () { /* ... */ },
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    // ...
  })
}

2.1.3 Vuex Getter

有时候从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数：（使用计算属性）
如

computed: {
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}

如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。
Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。
Getter 接受 state 作为其第一个参数：

const store = createStore({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos (state) {
      return state.todos.filter(todo => todo.done)
    }
  }
})

通过属性访问：
Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值：

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

通过方法访问：

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

mapGetters 辅助函数：

mapGetters 辅助函数：将 store 中的 getter 映射到局部计算属性：
用法类似mapState

 import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

如果你想将一个 getter 属性另取一个名字，使用对象形式：

...mapGetters({
  // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})

2.1.4 Vuex Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)
回调函数:实际进行状态更改的地方，并且它会接受 state 作为第一个参数
事件类型:store.commit(type)
定义：

const store = createStore({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

要唤醒一个 mutation 处理函数，你需要以相应的 type 调用 store.commit 方法：

store.commit('increment')

Payload：

你可以向 store.commit 传入额外的参数，即 mutation 的载荷（payload）：

// ...
mutations: {
  increment (state, n) {
    state.count += n
  }
}

// ..
store.commit('increment', 10)

在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读：

// ...
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}
// ...
store.commit('increment', {
  amount: 10
})

对象风格的提交方式

store.commit({
  type: 'increment',
  amount: 10
})

重要：Mutation 必须是同步函数

2.1.4 Vuex Actions

Actions存在的意义是假设你在修改state的时候有异步操作，vuex作者不希望你将异步操作放在Mutations中，所以就给你设置了一个区域，让你放异步操作，这就是Actions。

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
//  actions: {
//  increment ({ commit }) {
//        commit('increment')
//    }
//   }
})

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
分发 Action:

Action 通过 store.dispatch 方法触发：

store.dispatch('increment')

我们直接分发 mutation 岂不更方便？实际上并非如此，还记得 mutation 必须同步执行这个限制么？
Action 就不受约束！我们可以在 action 内部执行异步操作：

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

Actions 支持同样的载荷方式和对象方式进行分发：

// 以载荷形式分发
store.dispatch('incrementAsync', {
  amount: 10
})

// 以对象形式分发
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

2.1.4 Vuex Module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = createStore({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

2.2 Pinia

核心概念

State
Getter
Action
第一种是选项式写法

export const useCounterStore = defineStore("counter", {
  state: () => ({ count: 0 }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    async increment() {
      await sleep(1000);
      this.count++;
    },
  },
});

第二种是 composition api 写法

// 推荐用这种方式
export const useCounterStore = defineStore("counter", () => {
  const count = ref(0);
  const doubleCount = computed(() => count.value * 2);

  const increment = async () => {
    await sleep(1000);
    count.value++;
  };

  return { count, doubleCount, increment };
});

在 Setup Store 中

ref() 就是 state 属性
computed() 就是 getters
function() 就是 actions

2.2.1功能增强

插件化机制

可以增强 Pinia 能力
可以在 Pinia 加载时初始化一些数据，提供给应用使用

本质是一个函数，参数是 Pinia 实例内容，返回一个对象

function loggerPlugin() {
  console.log("hello");
}

export function piniaLogger(context: PiniaPluginContext) {
  // console.log('🚀 ~ piniaLogger ~ context:', context)
  context.store.$onAction((...args) => {
    console.log(`[🍍] ${name} with payload`, args);
  });
  // return {
  //   logger: "I am pinia logger",
  // };
}

插件既可以给定额外初始化 pinia 状态，也可以增强 Pinia 功能（日志）

3、Vuex 实现原理

各模块在核心流程中的主要功能：

Vue Components：Vue组件。HTML页面上，负责接收用户操作等交互行为，执行dispatch方法触发对应action进行回应。
dispatch：操作行为触发方法，是唯一能执行action的方法。
actions：操作行为处理模块。负责处理Vue Components接收到的所有交互行为。包含同步/异步操作，支持多个同名方法，按照注册的顺序依次触发。向后台API请求的操作就在这个模块中进行，包括触发其他action以及提交mutation的操作。该模块提供了Promise的封装，以支持action的链式触发。
commit：状态改变提交操作方法。对mutation进行提交，是唯一能执行mutation的方法。
mutations：状态改变操作方法。是Vuex修改state的唯一推荐方法，其他修改方式在严格模式下将会报错。该方法只能进行同步操作，且方法名只能全局唯一。操作之中会有一些hook暴露出来，以进行state的监控等。
state：页面状态管理容器对象。集中存储Vue components中data对象的零散数据，全局唯一，以进行统一的状态管理。页面显示所需的数据从该对象中进行读取，利用Vue的细粒度数据响应机制来进行高效的状态更新。
getters：state对象读取方法。图中没有单独列出该模块，应该被包含在了render中，Vue Components通过该方法读取全局state对象。

不管是 Vue 还是 React，全局状态的方案基本都是基于发布订阅模式实现

4、Pinia 实现原理

Pinia 的实现原理核心内容与 Vuex 类似，发布订阅模式机制以及状态管理逻辑。除此以外，Pinia 比 Vuex 多了一些对于 Composition API 的支持机制

看源码的顺序：

createPinia.ts，入口
app.provide(piniaSymbol, pinia)
app.config.globalProperties.$pinia = pinia
vue-demi，轻量的 Vue3 钩子库，一般你去封装插件，都会用它
store.ts
subscriptions.ts

5、CLI

三种方案可以选择

Vue2 CLI，https://cli.vuejs.org/
Vue3 create，https://github.com/vuejs/create-vue
Vite Vue,https://vitejs.dev/guide/，pnpm create vite my-vue-app --template vue-ts
Vue CLI 创建应用：npm install -g @vue/cli，vue create hello
vue-create 创建：npm create vue@3

我们说的 Vue CLI 其实包含两个，一个是早期的 Vue CLI，打包基于 webpack，另一个是最新的 CLI，打包基于 vite

5.1 实现

模板库，用于创建新项目的模板，https://github.com/vuejs/create-vue/tree/main/template/base
cli.ts (配置脚手架)

cli.ts的部分配置

// 用来人机交互完成后选择的变量
  let result: {
    projectName?: string;
    shouldOverwrite?: boolean;
    packageName?: string;
    needsTypeScript?: boolean;
    needsJsx?: boolean;
    needsRouter?: boolean;
    needsPinia?: boolean;
    needsVitest?: boolean;
    needsE2eTesting?: false | "cypress" | "nightwatch" | "playwright";
    needsEslint?: boolean;
    needsPrettier?: boolean;
    needsDevTools?: boolean;
  } = {};