扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vuex总体案例详解
  • 166

0
分享到

Vuex总体案例详解

2024-04-02 19:04:59 166人浏览 八月长安
摘要

目录一、简介二、优点三、使用步骤1.安装Vuex2.引用Vuex3.创建仓库Store四、包含模块1.State2.Getters3.Mutations4.Action5.Modul

在这里插入图片描述

一、简介

我们来看看对 Vuex 比较专业的介绍：

Vuex 是一个专为 Vue 开发的应用程序的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

简而言之，Vuex 采用类似全局对象的形式来管理所有组件的公用数据，如果想修改这个全局对象的数据，得按照Vuex提供的方式来修改（不能自己随意用自己的方式来修改）。

二、优点

Vuex状态管理跟使用传统全局变量的不同之处：

  1. Vuex的状态存储是响应式的： 就是当你的组件使用到了这个 Vuex 的状态，一旦它改变了，所有关联的组件都会自动更新相对应的数据，这样开发者省事很多。
  2. 不能直接修改Vuex的状态： 如果是个全局对象变量，要修改很容易，但是在 Vuex 中不能这样做，想修改就得使用 Vuex 提供的唯一途径：显示地提交（commint）mutations来实现修改。这样做的好处就是方便我们跟踪每一个状态的变化，在开发过程中调试的时候，非常实用。

三、使用步骤

1. 安装Vuex


npm install vuex --save

2. 引用Vuex


import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

3. 创建仓库Store

要使用 Vuex，我们要创建一个实例 store，我们称之为仓库，利用这个仓库 store 来对我们的状态进行管理。


//创建一个 store
const store = new Vuex.Store({});

四、包含模块

  • State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
  • Getter：允许组件从 store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
  • Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。
  • Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
  • Module：可以将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块

Vuex的作用类似全局对象，Vuex 使用单一状态树，用一个对象State包含了整个应用层级的所有状态，你可以理解为这些状态就是一堆全局变量和数据。

这里写图片描述

1. State

假设我们有一个全局状态 count 的值为 5。那么，我们就可以将其定义为 state 对象中的 key 和 value，作为全局状态供我们使用。如下：


 //创建一个 store
 const store = new Vuex.Store({
    //state存储应用层的状态
    state:{
        count:5  //总数：5
    }
 });

2. Getters

可以认为，getters 是store的计算属性，类似于computed,对state里的数据进行一些过滤，改造等等

假设我们要在state.count的基础上派生出一个新的状态newCount出来，就适合使用我们的 getters

getters 接受 state 作为其第一个参数


const store = new Vuex.Store({
   //state存储应用层的状态
   state:{
      count:5  //总数：5
   },
   getters:{
      newCount:state => state.count * 3
   }
});

在组件中获取 {{newCount}} 方式：


export default {
  computed: {
      newCount(){
          return this.$store.getters.newCount;
      }
  }
};

3. Mutations

Vuex 给我们提供修改仓库 store中的状态的唯一办法就是通过提交mutation ，且必须是同步函数

我们在 mutations中定义了一个叫increment的函数，函数体就是我们要进行更改的地方

会接受 state作为第一个参数，第二个是自定义传参


 const store = new Vuex.Store({
    //state存储应用层的状态
    state:{
        count:5  //总数：5
    },
    // mutations是修改state中数据的唯一途径
    mutations:{
        increment(state，value){
            state.count += value;
        }
    }
 });

我们在提交commit时候，第一个参数"increment",就是对应在 mutations中的increment方法，第二个参数是自定义值。例如：


 methods: {
   getVal(event) {
     //获取当前的按键的值
     let value = event.target.dataset.value;
     //通过commit提交一个名为increment的mutation
     this.$store.commit("increment", value);
   }
 }

在组件中获取 {{count}} 方式：


export default {
  computed: {
      count(){
          return this.$store.state.count;
      }
  }
};

4. Action

  1. 用于提交 mutation，而不是直接变更状态，可以包含任意异步操作
  2. 只有通过 action=>mutations=>states ，这个流程进行操作，具体步骤如下：

export default new Vuex.Store({
    //存放数据
    state: {
        obj: {},
    },
    //4. 通过commit mutations中的方法来处理
    mutations: {
        getParam(state, Object) {
            //5.修改state中的数据
            state.obj = Object
        }
    },
    //2.接受dispatch传递过来的方法和参数
    actions: {
        getParamSync(store, Object) {
            // 处理异步操作
            setTimeout(() => {
                //3.通过commit提交一个名为getParam的mutation
                //action 函数接收一个 store 的实例对象，因此你可以调用 store.commit 提交一个 mutation
                store.commit('getParam', Object);
            }, 1000)
        }
    }
})

然后我们就在组件里这么调用就可以了


methods: {
   getVal() {
	  let name= 'xia';
	  let age= '26';
	  let sex= 'man';
	  //1.通过dispatch将方法getParamSync和多个参数{name,age,sex}传递给actions
	  this.$store.dispatch('getParamSync',{name,age,sex})
   }
}

5. Modules

随着项目的复杂度增大，为了方便管理 Vuex，一般会将其按功能分割成不同的模块(Module)，方便日后管理。每个模块拥有自己的 state、mutation、action、getter 甚至是嵌套子模块


import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import * as getters from './getters'

import moduleA from './module/moduleA' // 模块A
import moduleB from './module/moduleB' // 模块B

Vue.use(Vuex)

export default new Vuex.Store({
    actions,
    getters,
    state,
    mutations,
    modules: {
        moduleA,
        moduleB
    }
})

moduleA.js / moduleB.js 文件


// 每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块
export default {
    state: {
        text: 'moduleA'
    },
    getters: {},
    mutations: {},
    actions: {}
}

然后我们就在组件里这么调用就可以了


<template>
	<div class="demo">
		<h1>{{getText1}}</h1>
		<h1>{{getText2}}</h1>
	</div>
</template>


computed: {
    getText1(){
    	return this.$store.state.moduleA.text;
    },
    //或
	...mapState({
		getText2: state => state.moduleB.text;
	})
}

由此可知，模块内部的 state 是局部的，只属于模块本身所有，所以外部必须通过对应的模块名进行访问。

五、Vuex最最简单的项目实例

运用vuex语法糖mapMutations和mapGetters

1. 存储数据

a.vue 文件


import { mapMutations } from "vuex"; // 引入mapMutations
export default {
	methods: {
		...mapMutations({
		    // 将changeNews与mutations中的SET_NEWS关联
		    changeNews: "SET_NEWS"
		}),
		submit(){
			// 提交一个名为changeNews的mutation，并传入参数val
			let val = 'test news';
			this.changeNews(val);// 相当于this.$store.commit("changeNews", val);
		}
	}
}

2. 获取数据

b.vue 文件


import { mapGetters } from "vuex"; // 引入mapGetters 
export default {
	computed: {
        // 用vuex读取数据(读取的是getters.js中的数据)
        // 相当于this.$store.getters.news(vuex语法糖)
        ...mapGetters(["news"])
	},
	created() {
        // 获取getters中news数据
        console.log(this.news);
	}
}

3. store文件目录结构

这里写图片描述

index.js


import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import * as getters from './getters'

//每次修改state都会在控制台打印log
import createLogger from 'vuex/dist/logger'

Vue.use(Vuex)

const debug = process.env.node_ENV !== 'production'

export default new Vuex.Store({
	actions,
	getters,
	state,
	mutations,
	strict: debug, // 当debug=true时开启严格模式(性能有损耗)
	plugins: debug ? [createLogger()] : []
})

state.js


const state = {
	news: {}
}

export default state;

mutations.js


const mutations = {
	SET_NEWS(state, val) {
		state.news= val
	}
}

export default mutations;

actions.js


//异步处理
const actions = {
    M_NEWS({ commit }, val) {
        commit('SET_NEWS', val);  // commit mutations修改
    }
}

export default actions;

getters.js


// 通常通过getters取数据 (this.$store.getters.news;)
export const news = state => state.news  // 不做其他处理 直接映射出去

4. 使用store

在 main.js 中引用


import store from './store' //vuex存储文件

new Vue({
	el: '#app',
	router,
	store,
	components: {
		App
	},
	template: '<App/>'
})

到此这篇关于Vuex总体案例详解的文章就介绍到这了,更多相关Vuex总体内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: Vuex总体案例详解

本文链接: https://lsjlt.com/news/135637.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Vuex总体案例详解
    目录一、简介二、优点三、使用步骤1.安装Vuex2.引用Vuex3.创建仓库Store四、包含模块1.State2.Getters3.Mutations4.Action5.Modul...
    99+
    2024-04-02
  • Vuex的安装、搭建及案例详解
    目录前言Vuex原理讲解 1、安装vuex组件2、使用Vuex求和案例Coute.vuestore.jsActions Mutationsgetters的使用：s...
    99+
    2024-04-02
  • SQLServer日期函数总结案例详解
    目录一，日期的格式化二，日期和时间的结构三，日期操作四. 日期函数SQL Server发展至今，关于日期的格式的控制方法，有传统的方法，比如CONVERT()，也有比较便利的新方法，...
    99+
    2024-04-02
  • Vue Vuex搭建vuex环境及vuex求和案例分享
    目录Vuex介绍概念何时使用多个组件需要共享数据时求和案例–纯vue版搭建vuex环境求和案例–vuex版一些疑惑和问题Vuex介绍 概念 在 Vue 中实现...
    99+
    2024-04-02
  • 使用Vuex的案例分析
    这篇文章给大家分享的是有关使用Vuex的案例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。什么是Vuex？vuex是专门为vue.js应用程序开发的一种状态管理模式，当多个视...
    99+
    2024-04-02
  • C# 总结QueueUserWorkItem传参几种方式案例详解
    最近在学习citrix的xenserver6.2的源代码，发现多处用到System.Threading命名空间下的ThreadPool.QueueUserWorkItem方法： ...
    99+
    2024-04-02
  • 详解QT媒体播放器代码案例实现
    QT媒体播放器代码案例实现涉及以下几个方面：1. 界面设计：使用QT的UI设计器设计播放器界面，包括播放/暂停按钮、进度条、音量控制...
    99+
    2023-09-22
    QT
  • Java BigDecimal案例详解
    引言 　　float和double类型的主要设计目标是为了科学计算和工程计算。他们执行二进制浮点运算，这是为了在广域数值范围上提供较为精确的快速近似计算而精心设计的。然而，它们没有提...
    99+
    2024-04-02
  • Android HandlerThread案例详解
    HandlerThread 顾名思义就是一种可以使用 Handler 的 Thread。日常开发中我们经常会通过创建一个 Thread 去执行任务，有多个任务就多创建几个线程实现，这...
    99+
    2024-04-02
  • Java JNDI案例详解
    JNDI的理解 JNDI是 Java 命名与文件夹接口（Java Naming and Directory Interface），在J2EE规范中是重要的规范之中的一个，不少专家觉得...
    99+
    2024-04-02
  • Java Map.entry案例详解
       Map.entrySet() 这个方法返回的是一个Set<Map.Entry<K,V>>，Map.Entry 是Map中的一个接口，...
    99+
    2024-04-02
  • Java ResourceBundle案例详解
    JAVA中ResourceBundle使用详解 这个类主要用来解决国际化和本地化问题。国际化和本地化可不是两个概念，两者都是一起出现的。可以说，国际化的目的就是为...
    99+
    2024-04-02
  • C# TreeNode案例详解
    目录添加节点删除修改方法1：方法二：添加节点 private void Form1_Load(object sender, EventArgs e) { tree...
    99+
    2024-04-02
  • C++ namespace案例详解
    在C++语言编写的程序中，变量和函数等的作用范围是有一定限制的。比如，在函数体中定义的一个临时变量就不可以在函数体外使用。为了解决变量和函数等的作用范围，在C++语言中引入了名空间的...
    99+
    2024-04-02
  • Java WeakHashMap案例详解
    WeakHashMap 继承于AbstractMap，实现了Map接口。 和HashMap一样，WeakHashMap 也是一个散列表，它存储的内容也是键值对(key-value)映...
    99+
    2024-04-02
  • Java Assert.assertEquals案例详解
    junit.framework包下的Assert提供了多个断言方法. 主用于比较测试传递进去的两个参数. Assert.assertEquals();及其重载方法: 1. 如果两者一...
    99+
    2024-04-02
  • JavaScript offsetParent案例详解
    1. offsetParent定义：那么offsetParent就是距离该子元素最近的进行过定位的父元素（position：absolute  relative fixed...
    99+
    2024-04-02
  • Java CharacterEncodingFilter案例详解
    一、什么是CharacterEncodingFilter 官方解释如下 是spring内置过滤器的一种，用来指定请求或者响应的编码格式。在web开发中经常被从来使用 二、Chara...
    99+
    2024-04-02
  • C# Assembly.Load案例详解
     我们在使用C# 语言的Assembly.Load 来加载托管程序集并使用反射功能时，一般需要先通过Assembly.Load(), Assembly.LoadFrom()...
    99+
    2024-04-02
  • Mybatis SqlSession案例详解
    目录前言创建事务Transaction创建执行器Executor创建DefaultSqlSession对象总结前言 老规矩，先上案例代码，我们按照这个案例一步一步的搞定Mybatis...
    99+
    2023-05-16
    Mybatis SqlSession Mybatis SqlSession案例
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作