• Vue3 之 Vuex - 状态管理

    目录

    一、概念

    1. 状态管理

    2. Vuex的状态管理

    3. 单一状态树 

    二、Vuex 的基本使用 

    1. Vuex的安装

    2. 创建store

    3. 在store文件夹下创建index.js

    4. 在main.js中引入 

    5. 组件中使用sotre

    6. 效果 

    三、核心概念 State

    1. 直接使用

    2. mapState

    使用 

    封装 useState.js 文件

            代码

            使用

    四、核心概念 Getters

    1. 基本使用

    代码

    使用

    2. getters第二个参数

    代码

    使用

    3. getters的返回函数

    代码

    使用

    4. mapGetters

    使用

    封装 useGetters.js 文件 

            代码

            使用

    五、核心概念 Mutations

    1. 重要原则 

    2. 基本使用

    代码

    使用

    3. 携带数据

    代码

    使用

    4. 常量类型

    定义mutation_types.js

    代码

    使用

    5. mapMutations

    使用

    封装 useMutations.js 文件

            代码

            使用 

    六、核心概念 Actions

    1. 基本使用

    代码

    使用

    2. 传递参数

    代码

    使用

    3. mapActions

    使用

    封装 useActions.js 方法

            代码

            使用

    4. 异步操作

    代码

    使用

    七、核心概念 Module

    1. 局部状态

    01 - 定义模块A.js

    02 - 定义store.js

    03 - 使用

    2. 命名空间

    01 - 基本使用

            定义模块A.js

            使用

    02 - module修改或派发根组件

    一、概念

    vue2 契合 vuex      |      vue3 契合 pinia

    1. 状态管理

    在开发中，应用程序需要处理各种各样的数据，这些数据需要保存在应用程序中的某一个位置，对于这些数据的管理就称之为是状态管理

    • 在Vue开发中，使用组件化的开发方式
    • 而在组件中定义data或者在setup中返回使用的数据，这些数
      据称之为state
    • 在模块template中可以使用这些数据，模块最终会被渲染成
      DOM，称之为View
    • 在模块中会产生一些行为事件，处理这些行为事件时，有可能
      会修改state，这些行为事件称之为actions 

    2. Vuex的状态管理

    • 可以考虑将组件的内部状态抽离出来，以一个全局单例的方式来管理
    • 在这种模式下，组件树构成了一个巨大的 “试图View”
    • 不管在树的哪个位置，任何组件都能获取状态或者触发行为
    • 通过定义和隔离状态管理中的各个概念，并通过强制性的规则来维护视图和状态间的独立性，代码会变得更加结构化和易于维护、跟踪

    3. 单一状态树 

    Vuex 使用单一状态树 : 

    • 用一个对象就包含了全部的应用层级的状态
    • 采用的是SSOT，Single Source of Truth，也可以翻译成单一数据源
    • 每个应用将仅仅包含一个 store 实例
      • 单状态树和模块化并不冲突，可以使用module模块

    单一状态树的优势 : 

    • 如果状态信息是保存到多个Store对象中的，那么之后的管理和维护等等都会变得特别困难
    • 所以Vuex使用了单一状态树来管理应用层级的全部状态
    • 单一状态树能够让我们最直接的方式找到某个状态的片段
    • 而且在之后的维护和调试过程中，也可以非常方便的管理和维护

    单一状态树的缺点 : 不够灵活

    二、Vuex 的基本使用 

    1. Vuex的安装

    npm install vuex

    2. 创建store

    每一个Vuex应用的核心就是store（仓库）

    store本质上是一个容器，它包含着你的应用中大部分的状态（state）

    Vuex和单纯的全局对象的区别 : 

    • 第一：Vuex的状态存储是响应式的
      • 当Vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会被更新
    • 第二：不能直接改变store中的状态
      • 改变store中的状态的唯一途径就显示提交 (commit) mutation
      • 这样使得我们可以方便的跟踪每一个状态的变化，从而让我们能够通过一些工具帮助我们更好的管理应用的状态

    3. 在store文件夹下创建index.js

    1. // 1. 引入
    2. import { createStore } from 'vuex';
    3.  
    4. // 2. 创建store对象
    5. const store = createStore({
    6.   // 3. 定义state
    7.   state: () => ({
    8.     // 4. 定义数据
    9.     count: 100
    10.   }),
    11.   // 5. 定义mutations
    12.   mutations: {
    13.     // 6. 定义方法
    14.     increment(state) {
    15.       state.count++;
    16.     }
    17.   }
    18. });
    19.  
    20. // 5. 导出
    21. export default store;

    4. 在main.js中引入 

    1. import { createApp } from 'vue';
    2. import App from './App.vue';
    3. // 1. 导入
    4. import store from './store';
    5. // 2. 使用
    6. createApp(App).use(store).mount('#app');

    5. 组件中使用sotre

    1. <template>
    2.   <div class="app">App 页面div>
    3.   
    4.   <h2>模版 : {{ $store.state.count }}h2>
    5.   <h2>computed : {{ storeCount }}h2>
    6.   <h2>解构count : {{ count }}h2>
    7.  
    8.   <button @click="btnClick">增加button>
    9. template>
    10.  
    11. <script setup>
    12. // 2. 在js中使用
    13. import { useStore } from 'vuex';
    14. import { computed, toRefs } from 'vue';
    15.  
    16. const store = useStore();
    17. console.log(store.state.count);
    18.  
    19. // 01 - computed包裹一下变成响应式
    20. const storeCount = computed(() => store.state.count);
    21. // 02 - 解构成ref对象
    22. const { count } = toRefs(store.state);
    23.  
    24. // 监听按钮的点击
    25. const btnClick = () => {
    26.   // 触发mutation，让count++
    27.   store.commit('increment');
    28. };
    29. script>

    6. 效果 

    三、核心概念 State

    1. 直接使用

    1. <template>
    2.   <div class="app">App 页面div>
    3.   
    4.   <h2>模版 : {{ $store.state.count }}h2>
    5.   <h2>computed : {{ storeCount }}h2>
    6.   <h2>解构count : {{ count }}h2>
    7. template>
    8.  
    9. <script setup>
    10. // 2. 在js中使用
    11. import { useStore } from 'vuex';
    12. import { computed, toRefs } from 'vue';
    13.  
    14. const store = useStore();
    15. console.log(store.state.count);
    16.  
    17. // 01 - computed包裹一下变成响应式
    18. const storeCount = computed(() => store.state.count);
    19. // 02 - 解构成ref对象
    20. const { count } = toRefs(store.state);
    21. script>

    2. mapState

    使用 

    1. <template>
    2.   <div class="app">App 页面div>
    3.   <h2>模版 : {{ $store.state.count }}h2>
    4.   <h2>mapState : {{ cCount }}h2>
    5.  
    6.   <button @click="btnClick">改变button>
    7. template>
    8.  
    9. <script setup>
    10. import { useStore, mapState } from 'vuex';
    11. import { computed } from 'vue';
    12.  
    13. // 1. 拿到store对象
    14. const store = useStore();
    15. // 2. 使用mapState解构出方法
    16. // const { count } = mapState(['count']);
    17. // 数组和对象都可以
    18. const { count } = mapState({
    19.   count: (state) => state.count
    20. });
    21. // 3. 拿到对应的值
    22. /**
    23.  * count => 底层还是通过this.$store.state.count去拿的
    24.  * setup 中没有this，所以传递过去时需要显示绑定一个$store
    25.  * 
    26.  * 通过显示绑定bind对象，让this指向这个对象
    27.  * 然后底层就能拿到this.$store了
    28.  */
    29. const cCount = computed(count.bind({ $store: store }));
    30.  
    31. const btnClick = () => {
    32.   store.commit('increment');
    33. };
    34. script>

    封装 useState.js 文件

            代码

    1. import { useStore, mapState } from 'vuex';
    2. import { computed } from 'vue';
    3.  
    4. export default function useState(mapper) {
    5.   // 1. 拿到store对象
    6.   const store = useStore();
    7.   // 2. 使用mapState拿到对应的方法
    8.   const stateFnsObj = mapState(mapper);
    9.   // 4. 定一个接受对象
    10.   const newState = {};
    11.   // 5.遍历
    12.   Object.keys(stateFnsObj).forEach((key) => {
    13.     // 6. 生成绑定过的对象
    14.     newState[key] = computed(stateFnsObj[key].bind({ $store: store }));
    15.   });
    16.   // 7. 返回
    17.   return newState;
    18. }

            使用

    1. <template>
    2.   <div class="app">App 页面div>
    3.   <h2>模版 : {{ $store.state.count }}h2>
    4.   
    5.   <h2>封装哒 : {{ fCount }}h2>
    6.  
    7.   <button @click="btnClick">改变button>
    8. template>
    9.  
    10. <script setup>
    11. import { useStore } from 'vuex';
    12. // 1. 导入封装的方法
    13. import useState from './hooks/useState';
    14. // 2. 使用
    15. const { count: fCount } = useState(['count']);
    16.  
    17. const store = useStore();
    18. const btnClick = () => {
    19.   store.commit('increment');
    20. };
    21. script>

    四、核心概念 Getters

    1. 基本使用

    代码

    1. import { createStore } from 'vuex';
    2.  
    3. const store = createStore({
    4.   state: () => ({
    5.     count: 100
    6.   }),
    7.   mutations: {
    8.     increment(state) {
    9.       state.count++;
    10.     }
    11.   },
    12.   // 定义getters
    13.   getters: {
    14.     doubleCount(state) {
    15.       return state.count * 2;
    16.     }
    17.   }
    18. });
    19.  
    20. export default store;

    使用

    1. <template>
    2.   <div class="app">App 页面div>
    3.   <h2>模版 : {{ $store.state.count }}h2>
    4.   
    5.   <h2>doubleCount : {{ $store.getters.doubleCount }}h2>
    6.  
    7.   <button @click="btnClick">改变button>
    8. template>
    9.  
    10. <script setup>
    11. import { useStore } from 'vuex';
    12.  
    13. const store = useStore();
    14. const btnClick = () => {
    15.   store.commit('increment');
    16. };
    17. script>

    2. getters第二个参数

    getters可以接收第二个参数，用来调用其他的getters

    代码

    1. import { createStore } from 'vuex';
    2.  
    3. const store = createStore({
    4.   state: () => ({
    5.     count: 100
    6.   }),
    7.   mutations: {
    8.     increment(state) {
    9.       state.count++;
    10.     }
    11.   },
    12.   getters: {
    13.     doubleCount(state, getters) {
    14.       // 可以调用其他的getters函数
    15.       return state.count * 2 + getters.mathRanDom;
    16.     },
    17.     // 生成[5,50)的随机数
    18.     mathRanDom() {
    19.       return Math.floor(Math.random() * 45) + 5;
    20.     }
    21.   }
    22. });
    23.  
    24. export default store;

    使用

    1. <template>
    2.   <div class="app">App 页面div>
    3.   <h2>模版 : {{ $store.state.count }}h2>
    4.   <h2>random : {{ $store.getters.mathRanDom }}h2>
    5.  
    6.   
    7.   <h2>doubleCount : {{ $store.getters.doubleCount }}h2>
    8.  
    9.   <button @click="btnClick">改变button>
    10. template>
    11.  
    12. <script setup>
    13. import { useStore } from 'vuex';
    14.  
    15. const store = useStore();
    16. const btnClick = () => {
    17.   store.commit('increment');
    18. };
    19. script>

    3. getters的返回函数

    getters中的函数本身，可以返回一个函数，可用来接受参数

    代码

    1. import { createStore } from 'vuex';
    2.  
    3. const store = createStore({
    4.   state: () => ({
    5.     count: 100
    6.   }),
    7.   mutations: {
    8.     increment(state) {
    9.       state.count++;
    10.     }
    11.   },
    12.   getters: {
    13.     doubleCount(state, getters) {
    14.       // 可以调用其他的getters函数
    15.       return state.count * 2 + getters.mathRanDom;
    16.     },
    17.     // 生成[5,50)的随机数
    18.     mathRanDom() {
    19.       return Math.floor(Math.random() * 45) + 5;
    20.     },
    21.     countAddNum(state) {
    22.       // 可用来接受传进来的参数
    23.       return function (num) {
    24.         return state.count + num;
    25.       };
    26.     }
    27.   }
    28. });
    29.  
    30. export default store;

    使用

    1. <template>
    2.   <div class="app">App 页面div>
    3.   <h2>模版 : {{ $store.state.count }}h2>
    4.  
    5.   
    6.   <h2>doubleCount : {{ $store.getters.doubleCount }}h2>
    7.  
    8.   
    9.   <h2>random : {{ $store.getters.mathRanDom }}h2>
    10.  
    11.   
    12.   <h3>countAddNum : {{ $store.getters.countAddNum(10) }}h3>
    13.   <h3>countAddNum : {{ $store.getters.countAddNum(20) }}h3>
    14.  
    15.   <button @click="btnClick">改变button>
    16. template>
    17.  
    18. <script setup>
    19. import { useStore } from 'vuex';
    20.  
    21. const store = useStore();
    22. const btnClick = () => {
    23.   store.commit('increment');
    24. };
    25. script>

    4. mapGetters

    使用

    1. <template>
    2.   <div class="app">App 页面div>
    3.  
    4.   <h2>{{ doubleCount }}h2>
    5.  
    6.   <button @click="btnClick">改变button>
    7. template>
    8.  
    9. <script setup>
    10. import { computed, toRefs, watch, watchEffect } from 'vue';
    11. import { useStore, mapGetters } from 'vuex';
    12.  
    13. const store = useStore();
    14. // 1. 第一种方法
    15. // const { doubleCount } = toRefs(store.getters);
    16. // 2. 第二种方法
    17. // const doubleCount = computed(() => store.getters.doubleCount);
    18.  
    19. // 3. 第三种方法，使用mapGetters
    20. const { doubleCount: doubleCountFn } = mapGetters(['doubleCount']);
    21. const doubleCount = computed(doubleCountFn.bind({ $store: store }));
    22.  
    23. // 这样时时打印数据
    24. watchEffect(() => {
    25.   console.log(doubleCount.value);
    26. });
    27.  
    28. const btnClick = () => {
    29.   store.commit('increment');
    30. };
    31. script>

    封装 useGetters.js 文件 

            代码

    1. import { useStore, mapGetters } from 'vuex';
    2. import { computed } from 'vue';
    3.  
    4. export default function useGetters(mapper) {
    5.   const store = useStore();
    6.   // 1. 接受全部getters
    7.   const gettersFn = mapGetters(mapper);
    8.   // 2. 定义新的函数数组
    9.   const newGetters = {};
    10.   // 3. 遍历绑定
    11.   Object.keys(gettersFn).forEach((key) => {
    12.     newGetters[key] = computed(gettersFn[key].bind({ $store: store }));
    13.   });
    14.   // 返沪
    15.   return newGetters;
    16. }

            使用

    1. <template>
    2.   <div class="app">App 页面div>
    3.  
    4.   <h2>{{ doubleCount }}h2>
    5.  
    6.   <button @click="btnClick">改变button>
    7. template>
    8.  
    9. <script setup>
    10. import { watchEffect } from 'vue';
    11. import { useStore } from 'vuex';
    12. // 1. 导入
    13. import useGetters from '@/hooks/useGetters';
    14.  
    15. // 2. 使用
    16. const { doubleCount } = useGetters(['doubleCount']);
    17.  
    18. const store = useStore();
    19. const btnClick = () => {
    20.   store.commit('increment');
    21. };
    22. // 这样时时打印数据
    23. watchEffect(() => {
    24.   console.log(doubleCount.value);
    25. });
    26. script>

    五、核心概念 Mutations

    更改 Vuex 的 store 中的状态的唯一方法是提交 mutation

    1. 重要原则 

     mutation 必须是同步函数

    • 因为devtool工具会记录mutation的日记
    • 每一条mutation被记录，devtools都需要捕捉到前一状态和后一状态的快照
    • 但是在mutation中执行异步操作，就无法追踪到数据的变化 

    2. 基本使用

    代码

    1. import { createStore } from 'vuex';
    2.  
    3. const store = createStore({
    4.   state: () => ({
    5.     count: 100
    6.   }),
    7.   mutations: {
    8.     increment(state) {
    9.       state.count++;
    10.     }
    11.   }
    12. });
    13.  
    14. export default store;

    使用

    1. <template>
    2.   <div class="app">App 页面div>
    3.  
    4.   <h2>{{ $store.state.count }}h2>
    5.  
    6.   <button @click="btnClick">改变button>
    7. template>
    8.  
    9. <script setup>
    10. import { useStore } from 'vuex';
    11.  
    12. const store = useStore();
    13. const btnClick = () => {
    14.   // 使用mutation中定义的方法
    15.   store.commit('increment');
    16. };
    17. script>

    3. 携带数据

    代码

    1. import { createStore } from 'vuex';
    2.  
    3. const store = createStore({
    4.   state: () => ({
    5.     count: 100
    6.   }),
    7.   mutations: {
    8.     // 接受传递过来的参数
    9.     increment(state, num) {
    10.       state.count += num;
    11.     }
    12.   }
    13. });
    14.  
    15. export default store;

    使用

    1. <template>
    2.   <div class="app">App 页面div>
    3.  
    4.   <h2>{{ $store.state.count }}h2>
    5.  
    6.   <button @click="btnClick">改变button>
    7. template>
    8.  
    9. <script setup>
    10. import { useStore } from 'vuex';
    11.  
    12. const store = useStore();
    13. const btnClick = () => {
    14.   // 传递数据
    15.   store.commit('increment', 10);
    16. };
    17. script>

    4. 常量类型

    定义mutation_types.js

    1. // 定义成常量类型
    2. export const INCREMENT = 'increment';

    代码

    1. import { createStore } from 'vuex';
    2. // 1. 导入
    3. import { INCREMENT } from './mutation_types';
    4.  
    5. const store = createStore({
    6.   state: () => ({
    7.     count: 100
    8.   }),
    9.   mutations: {
    10.     // 2. 使用常量作为名称，使用计算属性值
    11.     [INCREMENT](state, num) {
    12.       state.count += num;
    13.     }
    14.   }
    15. });
    16.  
    17. export default store;

    使用

    1. <template>
    2.   <div class="app">App 页面div>
    3.  
    4.   <h2>{{ $store.state.count }}h2>
    5.  
    6.   <button @click="btnClick">改变button>
    7. template>
    8.  
    9. <script setup>
    10. import { useStore } from 'vuex';
    11. // 1. 导入
    12. import { INCREMENT } from '@/store/mutation_types';
    13.  
    14. const store = useStore();
    15. const btnClick = () => {
    16.   // 2. 使用
    17.   store.commit(INCREMENT, 10);
    18. };
    19. script>

    5. mapMutations

    使用

    1. <template>
    2.   <div class="app">App 页面div>
    3.  
    4.   <h2>{{ $store.state.count }}h2>
    5.  
    6.   <button @click="btnClick">改变button>
    7. template>
    8.  
    9. <script setup>
    10. import { useStore, mapMutations } from 'vuex';
    11. import { INCREMENT } from '@/store/mutation_types';
    12.  
    13. const store = useStore();
    14.  
    15. // 1. 接受全部函数
    16. const mutationFns = mapMutations([INCREMENT]);
    17. // 2. 定义新的函数数组
    18. const newMutations = {};
    19. // 3. 遍历绑定
    20. Object.keys(mutationFns).forEach((key) => {
    21.   newMutations[key] = mutationFns[key].bind({ $store: store });
    22. });
    23. // 4. 从新生成的函数数组中解构出来
    24. const { increment } = newMutations;
    25. const btnClick = () => {
    26.   // 5. 使用
    27.   increment(10);
    28. };
    29. script>

    封装 useMutations.js 文件

            代码

    1. import { useStore, mapMutations } from 'vuex';
    2.  
    3. export default function useMutations(mapper) {
    4.   const store = useStore();
    5.   // 1. 接受全部函数
    6.   const mutationFns = mapMutations(mapper);
    7.   // 2. 定义新的函数数组
    8.   const newMutations = {};
    9.   // 3. 遍历绑定
    10.   Object.keys(mutationFns).forEach((key) => {
    11.     newMutations[key] = mutationFns[key].bind({ $store: store });
    12.   });
    13.   // 返回对象
    14.   return newMutations;
    15. }

            使用 

    1. <script setup>
    2. import { useStore, mapMutations } from 'vuex';
    3. // 1. 导入
    4. import useMutations from '@/hooks/useMutations';
    5. // 2. 解构
    6. const { increment } = useMutations(['increment']);
    7. const btnClick = () => {
    8.   // 3. 使用
    9.   increment(10);
    10. };
    11. script>

    六、核心概念 Actions

    Action类似于mutation

    • Action提交的是mutation，而不是直接变更状态
    • Action可以包含任意异步操作

    参数context : 

    • context是一个和store实例均有相同方法和属性的context对象
    • 所以可以从其中获取到commit方法来提交一个mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters
    • 但context不是store对象

    1. 基本使用

    代码

    1. import { createStore } from 'vuex';
    2.  
    3. const store = createStore({
    4.   state: () => ({
    5.     count: 100
    6.   }),
    7.   mutations: {
    8.     increment(state) {
    9.       state.count++;
    10.     }
    11.   },
    12.   getters: {
    13.     doubleCount(state, getters) {
    14.       return state.count * 2 + getters.mathRanDom;
    15.     },
    16.     mathRanDom() {
    17.       return Math.floor(Math.random() * 45) + 5;
    18.     }
    19.   },
    20.   actions: {
    21.     // 定义actions方法
    22.     incrementAction(context) {
    23.       // 1. 可进行接口请求
    24.       // balabalabala～
    25.       // 2. 通过mutation来修改state的状态
    26.       context.commit('increment');
    27.     }
    28.   }
    29. });
    30.  
    31. export default store;

    使用

    1. <template>
    2.   <div class="app">App 页面div>
    3.  
    4.   <h2>{{ $store.state.count }}h2>
    5.  
    6.   <button @click="btnClick">改变button>
    7. template>
    8.  
    9. <script setup>
    10. import { watchEffect } from 'vue';
    11. import { useStore } from 'vuex';
    12.  
    13. const store = useStore();
    14.  
    15. const btnClick = () => {
    16.   // 调用action方法
    17.   store.dispatch('incrementAction');
    18. };
    19. script>

    2. 传递参数

    代码

    1. import { createStore } from 'vuex';
    2.  
    3. const store = createStore({
    4.   state: () => ({
    5.     count: 100
    6.   }),
    7.   mutations: {
    8.     increment(state, num = 10) {
    9.       state.count += num;
    10.     }
    11.   },
    12.   getters: {
    13.     doubleCount(state, getters) {
    14.       return state.count * 2 + getters.mathRanDom;
    15.     },
    16.     mathRanDom() {
    17.       return Math.floor(Math.random() * 45) + 5;
    18.     }
    19.   },
    20.   actions: {
    21.     // 定义actions方法,接受参数
    22.     incrementAction(context, num) {
    23.       // 调用mutations方法
    24.       context.commit('increment', num);
    25.     }
    26.   }
    27. });
    28.  
    29. export default store;

    使用

    1. <template>
    2.   <div class="app">App 页面div>
    3.  
    4.   <h2>{{ $store.state.count }}h2>
    5.  
    6.   <button @click="btnClick">改变button>
    7. template>
    8.  
    9. <script setup>
    10. import { watchEffect } from 'vue';
    11. import { useStore } from 'vuex';
    12.  
    13. const store = useStore();
    14.  
    15. const btnClick = () => {
    16.   // 调用action方法，传递参数
    17.   store.dispatch('incrementAction', 9);
    18. };
    19. script>

    3. mapActions

    使用

    1. <template>
    2.   <div class="app">App 页面div>
    3.  
    4.   <h2>{{ $store.state.count }}h2>
    5.  
    6.   <button @click="btnClick">改变button>
    7. template>
    8.  
    9. <script setup>
    10. import { watchEffect } from 'vue';
    11. import { useStore, mapActions } from 'vuex';
    12.  
    13. const store = useStore();
    14. // 1. 接受全部的actions
    15. const actionsFn = mapActions(['incrementAction']);
    16. // 2. 定义新的actions对象
    17. const newActions = {};
    18. // 3. 遍历
    19. Object.keys(actionsFn).forEach((key) => {
    20.   newActions[key] = actionsFn[key].bind({ $store: store });
    21. });
    22. // 4. 解构
    23. const { incrementAction } = newActions;
    24. const btnClick = () => {
    25.   // 5. 使用
    26.   incrementAction(9);
    27. };
    28. script>

    封装 useActions.js 方法

            代码

    1. import { useStore, mapActions } from 'vuex';
    2.  
    3. export default function useActions(mapper) {
    4.   const store = useStore();
    5.   // 1. 接受全部的actions
    6.   const actionsFn = mapActions(['incrementAction']);
    7.   // 2. 定义新的actions对象
    8.   const newActions = {};
    9.   // 3. 遍历
    10.   Object.keys(actionsFn).forEach((key) => {
    11.     newActions[key] = actionsFn[key].bind({ $store: store });
    12.   });
    13.   return newActions;
    14. }

            使用

    1. <template>
    2.   <div class="app">App 页面div>
    3.  
    4.   <h2>{{ $store.state.count }}h2>
    5.  
    6.   <button @click="btnClick">改变button>
    7. template>
    8.  
    9. <script setup>
    10. import { watchEffect } from 'vue';
    11. import { useStore, mapActions } from 'vuex';
    12. // 1. 导入
    13. import useActions from '@/hooks/useActions';
    14. // 2. 解构
    15. const { incrementAction } = useActions(['incrementAction']);
    16. const btnClick = () => {
    17.   // 5. 使用
    18.   incrementAction(9);
    19. };
    20. script>

    4. 异步操作

    代码

    1. import { createStore } from 'vuex';
    2.  
    3. const store = createStore({
    4.   state: () => ({
    5.     // 1. 保存请求来的数据
    6.     arrayList: []
    7.   }),
    8.   mutations: {
    9.     // 2. 保存数据到 arrayList 中
    10.     saveArrayList(state, list) {
    11.       state.arrayList = list;
    12.     }
    13.   },
    14.   actions: {
    15.     // 3. 定义异步请求actions
    16.     async fetchDataList(context) {
    17.       /**
    18.        * 1. 请求
    19.        */
    20.       // fetch('http://xxxx').then((res) => {
    21.       //   res.json().then((data) => {
    22.       //     console.log(data);
    23.       //     context.commit('saveArrayList', data.list);
    24.       //   });
    25.       // });
    26.  
    27.       /**
    28.        * 2. 优化,Promise链式调用
    29.        */
    30.       // fetch('http://xxxx')
    31.       //   .then((res) => {
    32.       //     return res.json();
    33.       //   })
    34.       //   .then((data) => {
    35.       //     console.log(data);
    36.       //     context.commit('saveArrayList', data.list);
    37.       //   });
    38.  
    39.       /**
    40.        * 3. 使用async await
    41.        */
    42.       // const res = await fetch('http://xxxx');
    43.       // const data = await res.json();
    44.       // context.commit('saveArrayList', data.list);
    45.  
    46.       /**
    47.        * 4. 模拟，并返回一个promise
    48.        */
    49.       return new Promise((resolve) => {
    50.         setTimeout(() => {
    51.           const data = [1, 2, 3, 4, 5];
    52.           // 保存在state中
    53.           context.commit('saveArrayList', data);
    54.           // 把数据返回出去
    55.           resolve(data);
    56.         }, 1000);
    57.       });
    58.     }
    59.   }
    60. });
    61.  
    62. export default store;

    使用

    1. <template>
    2.   <div class="app">App 页面div>
    3.   
    4.   <h2>{{ dataList }}h2>
    5.   
    6.   <h2>{{ $store.state.arrayList }}h2>
    7.  
    8.   <h2>h2>
    9. template>
    10.  
    11. <script setup>
    12. import { ref } from 'vue';
    13. import { useStore } from 'vuex';
    14.  
    15. const store = useStore();
    16. const dataList = ref([]);
    17. // 1. 调用dispatch方法，请求数据
    18. store.dispatch('fetchDataList').then((res) => {
    19.   // 2. 拿到数据
    20.   dataList.value = res;
    21.   console.log(res);
    22. });
    23. script>

    七、核心概念 Module

    Module : 

    • 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象，当应用变得非常复杂时，store 对象就有可能变得相当臃肿
    • 为了解决以上问题，Vuex 可以将 store 分割成模块（module）
    • 每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块

    1. 局部状态

    state : 使用的时候需要在前面加上模块的名称

    mutation、getters、action : 默认集成在顶层中，可直接使用

     

    ps : 所以，state可以定义相同的名字，但是其他的重名会报错，命名冲突问题

    01 - 定义模块A.js

    1. export default {
    2.   // 模块数据
    3.   state: () => ({
    4.     m_Age: 18
    5.   }),
    6.   // 模块方法
    7.   mutations: {
    8.     // state => 指的是本模块的数据
    9.     m_AddAge(state) {
    10.       state.m_Age++;
    11.     }
    12.   },
    13.   // 模块action
    14.   actions: {
    15.     /**
    16.      * state => 指的是本模块的数据
    17.      * commit => 可调用所有方法
    18.      * rootState => 指的是根模块的数据
    19.      */
    20.     m_AddAgeAction({ state, commit, rootState }) {
    21.       // 调用本模块方法
    22.       commit('m_AddAge');
    23.       // 调用根模块方法
    24.       commit('increment');
    25.     }
    26.   },
    27.   // 模块action
    28.   getters: {
    29.     /**
    30.      * state => 指的是本模块的数据
    31.      * getters => 可调用所有getters
    32.      * rootState => 指的是根模块的数据
    33.      */
    34.     getMAge(state, getters, rootState) {
    35.       return state.m_Age;
    36.     }
    37.   }
    38. };

    02 - 定义store.js

    1. import { createStore } from 'vuex';
    2. // 1.导入模块
    3. import moduleA from './moduleA';
    4.  
    5. const store = createStore({
    6.   state: () => ({
    7.     count: 100
    8.   }),
    9.   mutations: {
    10.     increment(state) {
    11.       state.count++;
    12.     }
    13.   },
    14.   actions: {
    15.     incrementAction({ commit }) {
    16.       commit('increment');
    17.     }
    18.   },
    19.   getters: {
    20.     getCount(state) {
    21.       return state.count;
    22.     }
    23.   },
    24.   // 2. 注册一下
    25.   modules: {
    26.     moduleA
    27.   }
    28. });
    29.  
    30. export default store;

    03 - 使用

    1. <template>
    2.   <div class="app">App 页面div>
    3.   <h2>根目录 :h2>
    4.   count : {{ $store.state.count }}<br />
    5.   count : {{ $store.getters.getCount }}
    6.   <hr />
    7.   <hr />
    8.   <hr />
    9.   <h2>模块目录 :h2>
    10.   m_Age : {{ $store.state.moduleA.m_Age }} <br />
    11.   m_Age : {{ $store.getters.getMAge }}
    12. template>
    13.  
    14. <script setup>
    15. import { ref, computed } from 'vue';
    16. import { useStore } from 'vuex';
    17.  
    18. const store = useStore();
    19. /**
    20.  * 调用根模块
    21.  */
    22. // state
    23. const count = computed(() => store.state.count);
    24. console.log('count', count.value);
    25. // getters
    26. const getCount = computed(() => store.getters.getCount);
    27. console.log('getMAge', getCount.value);
    28. // mutation
    29. store.commit('increment');
    30. // action
    31. store.dispatch('incrementAction');
    32.  
    33. /**
    34.  * 调用模块内
    35.  */
    36. // state
    37. const m_Age = computed(() => store.state.moduleA.m_Age);
    38. console.log('m_Age', m_Age.value);
    39. // getters
    40. const getMAge = computed(() => store.getters.getMAge);
    41. console.log('getMAge', getMAge.value);
    42. // mutation
    43. store.commit('m_AddAge');
    44. // action
    45. store.dispatch('m_AddAgeAction');
    46. script>

    2. 命名空间

    默认情况下，模块内部的action、mutation、getters仍然是注册在全局的命名空间中的 : 

    • 这样使得多个模块能够对同一个 action 或 mutation 作出响应
    • Getter 同样也默认注册在全局命名空间

    如果希望模块具有更高的封装度和复用性

    • 可以添加 namespaced: true 的方式使其成为带命名空间的模块
    • 当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名

    01 - 基本使用

            定义模块A.js

    1. export default {
    2.   // 加上这个属性
    3.   namespaced: true,
    4.   state: () => ({
    5.     m_Age: 18
    6.   }),
    7.   ......
    8. };

            使用

    1. <template>
    2.   <div class="app">App 页面div>
    3.   <h2>根目录 :h2>
    4.   count : {{ $store.state.count }}<br />
    5.   count : {{ $store.getters.getCount }}
    6.   <hr />
    7.   <hr />
    8.   <hr />
    9.   <h2>模块目录 :h2>
    10.   m_Age : {{ $store.state.moduleA.m_Age }} <br />
    11.   m_Age : {{ $store.getters['moduleA/getMAge'] }}
    12. template>
    13.  
    14. <script setup>
    15. import { ref, computed } from 'vue';
    16. import { useStore } from 'vuex';
    17.  
    18. const store = useStore();
    19. /**
    20.  * 调用根模块
    21.  */
    22. // state
    23. const count = computed(() => store.state.count);
    24. console.log('count', count.value);
    25. // getters
    26. const getCount = computed(() => store.getters.getCount);
    27. console.log('getMAge', getCount.value);
    28. // mutation
    29. store.commit('increment');
    30. // action
    31. store.dispatch('incrementAction');
    32.  
    33. /**
    34.  * 调用模块内
    35.  */
    36. // state
    37. const m_Age = computed(() => store.state.moduleA.m_Age);
    38. console.log('m_Age', m_Age.value);
    39. // getters
    40. const getMAge = computed(() => store.getters['moduleA/getMAge']);
    41. console.log('getMAge', getMAge.value);
    42. // mutation
    43. store.commit('moduleA/m_AddAge');
    44. // action
    45. store.dispatch('moduleA/m_AddAgeAction');
    46. script>

    02 - module修改或派发根组件

    如果希望在action中修改root中的state

     

  • 相关阅读:
    Visual Studio 2019中的安全问题
    延时消息队列
    动物大全和动物识别系统毕业设计,动物大全和动物AI识别系统设计与实现,动物识别系统论文毕设作品参考
    【毕业设计】机器学习驾驶疲劳检测系统 - python
    【Vue Router的路由模式】
    经管博士科研基础【25】概率论中的相关基础概念
    什么? CSS 将支持 if() 函数了？
    达摩院中试比高：欢迎参加2024阿里巴巴全球数学竞赛（AI可参赛）
    查漏补缺 - ES6
    苹果CMS插件-苹果CMS全套插件免费
  • 原文地址：https://blog.csdn.net/a15297701931/article/details/127281544