vuex 的介绍以及使用详解

前端 潘老师 6个月前 (11-28) 126 ℃ (0) 扫码查看

本文主要讲解关于vuex 的介绍以及使用详解相关内容,让我们来一起学习下吧!

VueX的基本介绍

当您构建大型的Vue.js应用程序时,状态管理变得至关重要。Vuex是Vue.js官方提供的状态管理库,它允许您在应用程序中集中管理状态,并提供了一种可预测的状态管理方案。以下是一些关于Vuex的相关信息:

  1. 核心概念:Vuex包括几个核心概念,如state(状态)、getters(获取器)、mutations(变化)和actions(动作)。这些概念共同组成了Vuex的状态管理机制,使得状态的变化变得可预测和可控。
  2. 单一数据源:在Vuex中,应用的状态被存储在单一的数据源中,这使得状态的变化变得更加可追踪和管理。通过严格的状态管理,可以避免在应用程序中出现难以追踪的bug。
  3. 数据流:Vuex遵循严格的数据流规则,所有的状态变化都需要通过特定的方式来触发和处理。这种数据流的规范性使得应用程序的状态变化更加可控,也更容易调试和维护。
  4. 插件和工具:Vuex提供了丰富的插件和开发工具,帮助开发者更好地管理和调试应用程序的状态。例如,Vue DevTools可以帮助您实时追踪和调试Vuex状态的变化。
  5. 适用场景:Vuex特别适用于大型的、复杂的Vue.js应用程序,对于简单的应用程序可能会显得过于繁琐。在需要管理大量状态和实现复杂数据流的场景下,Vuex能够发挥其强大的作用。

关系图

可以将关系图里面的 (Vue components) 当作去饭店吃饭的客人,(Actions) 比作饭店的服务员,(Mutations) 比作饭店的后厨 (State) 比作菜品 , 当作一个正常的常规流程

VueX 的核心概念

State(状态)

State即应用程序中需要管理的状态,可以理解为存储数据的地方。在Vuex中,所有的状态都被存储在单一的数据源中,即store。这样做的好处是可以方便地跟踪状态的变化,以及在需要时进行调试和监控。

Getters(获取器) Getters可以理解为store的计算属性,它们的作用是从state中派生出一些状态,类似于Vue组件中的计算属性。通过getters,我们可以对state进行一些复杂的计算或筛选,然后在组件中使用这些派生出的状态。

Mutations(变化)

Mutations是唯一允许修改state的地方。每个mutation都有一个字符串类型的事件类型(type)和一个回调函数,回调函数接受state作为第一个参数。在mutation中,我们可以对state进行同步的修改操作。

Actions(动作)

Actions类似于mutations,不同之处在于actions可以包含异步操作。通过actions,我们可以提交mutation来间接地对state进行修改。这样做的好处是可以将一些异步操作放在actions中,使得我们的代码更加清晰和易于维护。

Modules(模块)

当应用变得非常复杂时,单一的store可能会变得难以维护。Vuex允许我们将store分割成模块(module),每个模块拥有自己的state、getters、mutations和actions。这样做的好处是可以更好地组织代码,使得应用的状态管理更加清晰和可维护。

VueX 的基本使用

用法

安装Vuex

首先,您需要通过npm或yarn安装Vuex:

npm install vuex
# 或
yarn add vuex

1. 在 src 下创建 store 目录, 并添加 index.js 文件

// 从vuex 中引入 createStore
    import { createStore } from "vuex";

    // 创建一个新的 store 实例
    const store = createStore({
        // state 是一个方法,存放状态的地方
        state() {
            // return的就是当前的状态
            return {
                num: 0,
            };
        },

        // 同步修改state
        mutations: {
            /**
             * 接收的第一个参数是当前的state
             * 第二个参数是传过来的参数
             */
            add(state, name) {
                console.log(name);
                state.num++;
            },
        },
        actions: {
            /**
             * 第一个参数是context 也就是当前上下文
             * 比如可以直接获取state、使用 commit 调用等
             *
             * 第二个参数是页面传过来的参数
             */
            asyncAdd(context, name) {
                console.log(name);
                /**
                 * 使用 commit 调用 mutations 里面的方法改变数据
                 * 第一个参数是方法名
                 * 第二个是要传的参数
                 */
                context.commit("add", name);
            },
        },
    });

    export default store;

2. 在入口文件引入, 并通过 use 挂载

import { createApp } from "vue";
    import router from "./router";
    import vuex from "./store";

    createApp(LearnRouter)
        // 使用use 方法 把我们路由挂载到vue上
        .use(router)
        // 使用 use 把vuex挂载到实例上
        .use(vuex)
        .mount("#app");

通过以上的步骤,您就可以在Vue应用程序中使用Vuex来管理状态了。当您需要在组件中使用state、getters、mutations或actions时,可以通过this.$store来访问store中的内容。

3.在页面使用

<template>
        <h2>App组件</h2>
        <h1>通过 $store.state.数据 的方式</h2>
        <h2>{{ $store.state.num }}</h2>
    </template>

    <script>
    import { mapState } from 'vuex'
        export default {
            data() {
                return {

                }
            }
        }
    </script>

通过 辅助函数 使变量方便使用

在需要使用变量的页面从vuex导入mapState

import { mapState } from 'vuex'
    
    //在computed 里 使用
    componted: {
        ...mspState(['数据1','数据2','数据3'])
    }

修改数据

在 引入 vuex 的文件内 书写

import { createStore } from 'vuex'

    const store = createStore({
        state() {
            return {
                num: 10086,
                num2: 10010,
                num3: 176125,
            }
        },
        // 当前选项内存储 vuex 内唯一的 修改 state 内数据的方法
        mutations: {
            addNum(state, data) {
                // 第一个形参: 就是当前的state 选项
                // 第二个形参: 外界调用 addNum 的时候,传递的值
                state.num++
            }
        }
    })

    export default store

在使用方法的文件内调用

<template>
        <h2>App组件</h2>
        <h1>通过 $store.state.数据 的方式</h2>
        <h2>{{ $store.state.num }}</h2>

        <h1>通过 辅助函数 的方式</h2>
        <h2>{{ num }}</h2>
        <button @click="NumAdd">点击修改 num 的值</button>
    </template>

    <script>
    import { mapState } from 'vuex'
        export default {
            data() {
                return {

                }
            },
            methods: {
                NumAdd() {
                    // 拿到 方法,当触发 NumAdd 时, 触发 传递过来的 addNum 方法
                    this.$store.commit('addNum')
                }
            },
            computed: {
                ...mapState(['num','num2','num3'])
            }
        }
    </script>

actions 选项

// 当前选项类似于 mutations 中的方法
    // 内部 主要存储对于异步方法的处理
    // 调用 mutations 中, 修改 state 的数据
    actions: {
        asyncAddNum(context, data) {
            // 当前的两个参数
                // context: 上下文,可以利用第一个形参获取 state 中的数据 或者 
                调用 mutations 中的方法
                // data: 外界调用当前方法传递的参数
            setTimeout(() => {
                context.commit('addNum')
            },1000)
        }
    }
    
    
    //在要用到该方法的文件中 
    import { mapActions } from 'vuex'
    
    // methods 里 解构
    ...mapActions(['asyncAddNum'])
    
    // 在触发 事件时 直接调用
     Num3Add() {
         this.asyncAddNum()
     }

getter 选项

 // 在 引入 vuex 的地方 创建 getters 选项
    import { createStore } from 'vuex'

    const store = createStore({
        state() {
            return {
                num: 10086,
                num2: 10010,
                num3: 176125,
                name: '张三'
            }
        },
        getters: {
            getterName (state) {
                return state.name
            }
        }

    })

    export default store
    
    <template>
        <h1>App组件</h2>
        <!-- 通过 $store.getters.属性名 获取 -->
        <h2>{{ $store.getters.getterName }}</h2>
        <!-- 通过 mapGetters 解构 进来数据 -->
        <h2> {{ getterName }} </h2>
    </template>

    <script>
    import { mapGetters } from 'vuex'
    export default {

        computed: {
            ...mapGetters(['getterName'])
        }

    }
    </script>

modules 选项

新建一个文件分割数据 stu.js

export default {
    state() {
        return {
            name: '李四',
            age: '18'
        }
    }

}

在 store的 index.js 文件内 引入 stu.js 并且注册 stu

import { createStore } from 'vuex'

    import stu from './stu'
    const store = createStore({
        state() {
            return {
                num: 10086,
                num2: 10010,
                num3: 176125,
                name: '张三'
            }
        },
        modules: {
            stu
        }

    })

    export default store

在使用界面直接用 $store.state.stu.属性名

<template>
        <h1>App组件</h2>
        <h2>{{ $store.state.stu.name }}</h2>
        <h2>{{ $store.state.stu.age }}</h2>
    </template>

    <script>
    import { mapGetters } from 'vuex'
    export default {

        computed: {
            ...mapGetters(['getterName'])
        }

    }
    </script>

总的来说,Vuex为大型的、复杂的Vue.js应用程序提供了一种强大的状态管理方案,通过严格的数据流规则和一些核心概念,使得状态管理变得更加可控和可预测。希望以上的讲解能够帮助您更好地理解和使用Vuex。

以上就是关于vuex 的介绍以及使用详解相关的全部内容,希望对你有帮助。欢迎持续关注潘子夜个人博客(www.panziye.com),学习愉快哦!


版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/front/11929.html
喜欢 (0)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】