Vue中状态管理器(vuex)详解以及实际应用场景

yizhihongxing

Vue中状态管理器(Vuex)详解以及实际应用场景

一、什么是Vuex

Vuex是一个用于Vue.js应用程序的状态管理模式。它采用集中式存储管理应用的所有组件状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension ,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

二、Vuex的核心概念

  1. State 状态: 在store中存储数据的对象。在组件内部通过$store.state.xxx或mapState获取数据。
  2. Getter获取器: 在store中提供了一种将状态映射为计算属性的方法,即Getter。可以在组件内部通过$store.getters.xxx或mapGetters获取。
  3. Mutation突变: 改变store中状态的唯一方法,但是仅仅是同步改变,因此不能写异步操作。在组件内部调用$store.commit('XXX',params)来触发Mutation的执行。
  4. Action行动: 异步操作 or 复杂操作的函数,在组件内部调用$store.dispatch('XXX',params)来触发Action的执行。Action中可以触发Mutation的执行。
  5. Module: 将store分割成模块,每个模块具有自己的state, mutation, action, getters。

三、Vuex详细实现

1.安装Vuex

使用npm或者yarn进行安装。

//使用npm安装
npm install vuex --save 

//使用yarn安装
yarn add vuex

2.注册store

在Vue应用程序中注册store,关于store的注册,我们应该将状态、mutations、actions、getters分别拆分到单独的文件中,按模块划分,方便维护。

//store.js文件
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const state = {
    count: 1
}

const mutations = { 
    add(state){   
        state.count++;
    },
    reduce(state){
        state.count--;
    }
}

const actions = {   
    addAction(context){   
        context.commit('add');
    },
    reduceAction({commit}){    
        commit('reduce');
    }
}

const getter = {
    getCount(state){
        return state.count;
    }
}

export default new Vuex.Store({
    state,mutations,actions,getter
});

3.使用Vuex

在根组件中将store绑定到Vue,使用$store.commit/ dispatch/ state/ getters来调用。

//main.js文件
import Vue from 'Vue'
import App from './App.vue'
import store from './store.js'

new Vue({
    el: '#app',
    store,   //将store注入根组件
    render: h => h(App)
});
//Example1.vue文件

<template>
    <div>
        <button @click="add">点击增加</button>
        <button @click="reduce">点击减少</button>
        <div>count{{count}}</div>
    </div>
</template>

<script>
    import { mapState,mapGetters,mapMutations,mapActions } from 'vue';
    export default {
        computed: {
            ...mapState([
                'count'
            ]),
            ...mapGetters([
                'getCount'
            ])
        },
        methods: {
            ...mapMutations([
                'add',
                'reduce'
            ]),
            ...mapActions([
                'addAction',
                'reduceAction'
            ])
        }
    }
</script>

4.命名空间

当store中模块化的数据过多时,可能会出现命名冲突的问题,Vuex提供了命名空间的方式来避免这种问题。

//navbar.js 文件
const navbar = { 
    state:{
        username: 'John' 
    },
    mutations:{ ... },
    actions:{ ... },
    getters:{
        getUsername(state,getters,rootState){ 
            return state.username;
        }
    }
}
export default navbar;
//store.js文件
import navbar from './navbar.js';

export default new Vuex.Store({
    modules: {
        navbar: navbar,
    }
})

当使用命名空间时,得注意在方法访问时,应该在组件中传入参数{root: true},来使其找到正确的命名空间store。

示例代码如下:

<button @click="$store.commit('navbar/add',null,{ root: true })">+</button>

5.异步操作

如果想要执行异步操作的方法,可以使用actions,并进行封装,最后在mutations中进行数据操作。

示例代码如下:

//store.js文件
const actions = {
    async getMarket({ commit }) {
        const res = await api.getMarket();
        commit('setMarket',res.data);
    }
}

const mutations = {
    setMarket(state, market) {
        state.market = market;
    }
}

示例代码2:

//store.js文件
const actions = {
    getMovies({ state, commit }) {
        return new Promise((resolve, reject) => {
            Vue.http.get(`${state.baseUrl}/in_theaters?start=0&count=10`)
                .then(res => {
                    let movies = res.body.subjects.map(item => ({
                        title: item.title,
                        imgUrl: item.images.small
                    }));
                    commit('setMovies', movies);
                    resolve();
                }, err => {
                    reject(err);
                });
        });
    }
}

const mutations = {
    setMovies(state, movies) {
        state.movies = movies;
    }
}

四、Vuex的应用场景

  1. 在大型单页面应用中,状态管理变得相对复杂,使用Vuex可以非常方便的进行状态管理。
  2. 存放全局变量,比如用户信息、菜单控制、路由控制等。
  3. Angular和React等框架中也提供了类似的状态管理服务,Vue也不例外,Vuex的出现是Vue为用户带来的福利之一,相当于团队协作中的状态管理的利器。

总之,在不同的应用场景下,使用Vuex可以帮助我们更好地实现状态管理。同时,合理地运用Vuex,还可以让开发者在大型项目中更好地进行团队协作和代码维护。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Vue中状态管理器(vuex)详解以及实际应用场景 - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • Vue开发之封装上传文件组件与用法示例

    Vue开发之封装上传文件组件与用法示例 一、概述 在Vue项目中,我们经常需要使用到上传文件的功能,为了提高代码的可复用性并减少冗余代码,我们可以封装一个通用的上传文件组件。本篇攻略将介绍如何封装上传文件组件以及如何在Vue项目中使用该组件。 二、上传文件组件的封装 创建 UploadFile.vue 组件文件,并添加如下代码: <template&g…

    Vue 2023年5月28日
    00
  • vue解析指令compile源码层面使用解析

    Vue.js 是一个流行的 JavaScript 框架,它支持使用模板语法编写数据绑定和渲染逻辑,这些模板语法通过指令进行定义和使用。在 Vue.js 中,一个指令通常由两部分组成:指令名称和绑定值。指令名称可以是任意有效的 CSS 类名或 HTML 属性名,绑定值可以是表达式或 JavaScript 对象。当一个指令被解析和渲染时,Vue.js 会将其转换…

    Vue 2023年5月27日
    00
  • vue获取验证码倒计时组件

    下面就让我来详细讲解一下 “Vue获取验证码倒计时组件” 的完整攻略。 一、需求分析 在现代应用程序中,验证码是非常重要的。 许多应用程序需要验证码以增加安全性。因此需要一个验证码组件,这个组件的功能应该是根据用户点击发送验证码按钮时,开始倒计时,在倒计时结束之前,用户不能再次发送验证码,同时按钮的文本要实时更新显示倒计时。 二、技术选型 在Vue.js中可…

    Vue 2023年5月29日
    00
  • vue中倒计时组件的实例代码

    下面是“vue中倒计时组件的实例代码”的完整攻略。 1. 安装并引入插件 我们可以使用Vue插件vue-countdown来实现倒计时组件。首先需要安装该插件并引入: npm install vue-countdown –save import { CountDown } from ‘vue-countdown’; 2. 创建组件 我们可以使用CountD…

    Vue 2023年5月29日
    00
  • 基于Vue实现支持按周切换的日历

    实现支持按周切换的日历,需要借助Vue.js框架及其丰富的生态工具。本攻略将分为以下几个步骤进行讲解: 初始化Vue项目 安装所需依赖 编写日历组件 实现按周切换功能 下面我们一步一步进行详细的讲解。 1. 初始化Vue项目 在实现日历组件之前,需要先安装Vue并初始化项目。具体步骤如下: # 安装Vue脚手架 npm install -g @vue/cli…

    Vue 2023年5月29日
    00
  • 解决vue无法侦听数组及对象属性的变化问题

    下面是解决Vue无法侦听数组及对象属性的变化问题的完整攻略: 背景 在Vue中,我们可以使用vue实例上提供的$watch方法来监测数据变化,在数据变化时做出相应的处理。但是,在Vue中我们使用$watch时,会发现无法侦听到对象或者数组的变化。这是因为Vue只能侦听属性的变化,而对于数组的操作,我们可以使用Vue提供的$set方法来实现。 解决方案 监听对…

    Vue 2023年5月28日
    00
  • Vue + Axios 请求接口方法与传参方式详解

    下面是详细讲解 “Vue + Axios 请求接口方法与传参方式详解” 的完整攻略。 简介 Vue 是一个渐进式框架,许多 web 应用程序使用它来构建 UI。Axios 是一个基于 promise 的 HTTP 库,可以用于进行数据请求。在 Vue 中,我们可以结合 Axios 在应用程序中轻松地发送数据请求。 本攻略将为您提供如何使用 Vue + Axi…

    Vue 2023年5月27日
    00
  • Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)

    下面我来详细讲解Vuejs入门教程的完整攻略。 一、前置知识 在学习Vuejs之前,需要掌握以下前置知识: HTML、CSS、JavaScript基础知识; 熟悉jQuery框架。 二、单向绑定 2.1 什么是单向绑定 单向绑定是Vue.js的一种核心机制,其核心思想是将数据模型的变化自动映射到视图中,实现数据和视图的自动同步。单向绑定主要分为以下两种方式:…

    Vue 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部