Vuex总体案例详解

目录
  • 一、简介
  • 二、优点
  • 三、使用步骤
    • 1. 安装Vuex
    • 2. 引用Vuex
    • 3. 创建仓库Store
  • 四、包含模块
    • 1. State
    • 2. Getters
    • 3. Mutations
    • 4. Action
    • 5. Modules
  • 五、Vuex最最简单的项目实例
    • 1. 存储数据
    • 2. 获取数据
    • 3. store文件目录结构
      • index.js
      • state.js
      • mutations.js
      • actions.js
      • getters.js
    • 4. 使用store

一、简介

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

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

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

二、优点

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

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

三、使用步骤

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)。每个模块拥有自己的 statemutationactiongetter、甚至是嵌套子模块

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

1. State

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

 //创建一个 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),方便日后管理。每个模块拥有自己的 statemutationactiongetter 甚至是嵌套子模块

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语法糖mapMutationsmapGetters

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总体内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vuex actions异步修改状态的实例详解

    actions异步修改状态与mutations同步修改状态是两个容易混淆的概念,因为两者在执行上,很难测试出两者的差别,而我们要区别它们两,首先你得区分同步与异步,我的理解是,同步更像是一条流水线作业,而异步则更像是多条,例子你比如打电话,我们通常是我打给我妈,打完之后,再跟我爸打,而异步更像是某聊天工具,你既可以跟你爸聊,又可以跟你妈聊,你跟你妈聊可以在你爸的后面,也可以在他前面,你爸也是 而actions与mutations的区别就在此,mutations是你进行用百度钱包买一件商品时,你必

  • Vue+Vuex实现自动登录的知识点详解

    在之前实现的版本中,如果你进行测试,可以看到在浏览器的local Storage中,确实里面有了我们加入的Authorization,而且如果没有登录的话,直接访问主页会进入登录页面.但其实有好几个问题并没有解决: 一.我们所加的Authorzation其实并不是从服务器传过来的,而是自己的测试:只要服务器传过来了200的响应状态码,我们就自己加上固定的Authorization 二.我们重新进入的时候,判断条件是只要有Authorization就可以直接进入了,但其实应该提交给服务器判断这个A

  • 对vuex中getters计算过滤操作详解

    getter这个概念其实我们写的时候感觉好像和Mutations修改状态一样,实际上它们是有区别的: getters比较死板,如果你的百度钱包只有在金额为100才能提现,那么你在写提现页面,它是早已固定好的,而Mutation不一样,当你点击百度钱包提现,你哪怕是一元,它只要你点击了便可以提现,而且getters它是不需要什么点击,它就存在,只要你写了,这是什么意思,就是说假设你百度钱包为0,你存在了getter它就有100元,而你如果写许多百度经验,百度再次发红包0.5元时它就是100+0.5

  • vue.js的状态管理vuex中store的使用详解

    一.状态管理(vuex)简介 vuex是专为vue.js应用程序开发的状态管理模式.它采用集中存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.vuex也集成刀vue的官方调试工具devtools extension,提供了诸如零配置的time-travel调试.状态快照导入导出等高级调试功能. 二.状态管理核心 状态管理有5个核心,分别是state.getter.mutation.action以及module.分别简单的介绍一下它们: 1.state state为

  • vuex 中辅助函数mapGetters的基本用法详解

    mapGetters辅助函数 mapGetters辅助函数仅仅是将 store 中的 getter 映射到局部计算属性: 1.在组件或界面中不使用mapGetter调用映射vuex中的getter 1.1 调用映射根部store中的getter <!-- test.vue --> <template> <div class="vuexReponse"> <div @click="changeVal">点击</di

  • Vuex总体案例详解

    目录 一.简介 二.优点 三.使用步骤 1. 安装Vuex 2. 引用Vuex 3. 创建仓库Store 四.包含模块 1. State 2. Getters 3. Mutations 4. Action 5. Modules 五.Vuex最最简单的项目实例 1. 存储数据 2. 获取数据 3. store文件目录结构 index.js state.js mutations.js actions.js getters.js 4. 使用store 一.简介 我们来看看对 Vuex 比较专业的介绍:

  • Vuex的安装、搭建及案例详解

    目录 前言 Vuex原理讲解 1.安装vuex组件 2.使用Vuex 求和案例 Coute.vue store.js Actions Mutations getters的使用: store Store仓库数据的使用: 效果图 GetState 的引入 总结 前言 本文讲诉了Vuex的安装.搭建.以及Actions.Mutations.State.Getters的使用,为什么使用mapState.mapGetters以及一些细节的解释 Vuex原理讲解 Actions:词义是 动作行为 Mutat

  • C语言 指针的初始化赋值案例详解

    目录 1.指针的初始化 2.指针的赋值 3.指针常量 4.指针初始化补充 5.void *型指针 6.指向指针的指针 1.指针的初始化 指针初始化时,"="的右操作数必须为内存中数据的地址,不能够是变量,也不能够直接用整型地址值(可是int*p=0;除外,该语句表示指针为空).此时,*p仅仅是表示定义的是个指针变量,并没有间接取值的意思. 比如: int a = 25; int *ptr = &a; int b[10]; int *point = b; int *p = &am

  • Android mvvm之LiveData原理案例详解

    1. 生命周期感知 1.1 生命周期感知组件 我们知道,Controller(Activity or Fragment) 都是有生命周期的,但是传统的 Controller 实现方式只负责 Controller 本身的生命周期管理,而与业务层的数据之间并没有实现良好解耦的生命周期事件交换.所以业务层都需要自己主动去感知 Controller 生命周期的变化,并在 Controller 的生存期处理数据的保活,而在消亡时刻解除与 Controller 之间的关系,这种处理方式随着业务规模的扩大往往

  • vue keepAlive缓存清除问题案例详解

    vue项目中经常会用到keepalive来做缓存,在应付基本要求上可以说非常方便.但是遇到同一个页面,根据条件不同,分别缓存或者不缓存,就有些麻烦了. 首先先把坑列出来: 1. <keep-alive v-if="xxx"> <router-view /> </keep-alive> <keep-alive v-else> <router-view /> </keep-alive> 网上很多都是这种方法,用了这种方

  • vue之keepAlive使用案例详解

    在开发中经常有从列表跳到详情页,然后返回详情页的时候需要缓存列表页的状态(比如滚动位置信息),这个时候就需要保存状态,要缓存状态:vue里提供了keep-alive组件用来缓存状态. 可以用以下几种方案解决问题: 一.利用meta标签 1.首先在路由中的meta标签中记录keepAlive的属性为true path: '/classify', name: 'classify', component: () => import('@/views/classify/classify.vue'), m

  • AngularJS日程表案例详解

    功能:添加事件/完成事件/删除事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .note{ margin:0 auto; background: orange; color: ora

  • BootStrap的JS插件之轮播效果案例详解

    Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 案例 下面展示的就是此插件和相关组件制作的轮播案例. <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class

  • Vue 过渡(动画)transition组件案例详解

    Vue过度(动画),本质走的是CSS3:transtion,animation. 控制器div显示/隐藏,代码如下: <div id="box"> <input type="button" value="按钮" @click="toggle"> <div id="div1" v-show="isShow"></div> </div&g

  • vue.js+boostrap项目实践(案例详解)

    一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变得更美观和更容易,同时vue.js又是可以绑定model和view(这个相当于MVC中的,M和V之间的关系),使得对数据变换的操作变得更加的简易,简化了很多的逻辑代码. 二.学习这篇文章需要具备的知识 1.需要有vue.js的知识 2.需要有一定的HTML.CSS.JavaScript的基础知识 3

随机推荐