Vuex-状态管理模式

作用：集中存储和管理应用的所有组件状态。通俗的说，就是集中存储、计算、处理数据

一个项目只有一个数据源，所用的组件共用一个仓库（Store）

使用场景：组件间存在公用依赖的数据

在Store仓库里，有以下几种属性：

state是用来存放数据,远程加载数据，加载的是一个静态的数据;

getters是初步获取和简单处理state里面的数据(这里的简单处理不能改变state里面的数据)

//定义getters 不推荐使用箭头函数
const getters = {count:function(state){return state.count +=100}
};

//使用mapGetters
<script>
//引入 import {mapState,mapMutations,mapGetters} from 'vuex' computed:{ ...mapState([ " count" ]), ...mapGetters([ "count" ]) }, </script>

mutation：里面装着一些改变数据方法的集合,把处理数据逻辑方法全部放在mutations里面

注：Vuex中store数据改变的唯一方法就是mutation

mutation结构：{type:handler()}, 事件类型(type)和回调函数(handler)

调用type的时候需要用到store.commit方法。

载荷（payload）:简单的理解就是往handler(state)中传参

//定义mutationimport Vuex from 'vuex'const store = new Vuex.Store({state: {count: 1},mutations: {increment (state, n) {   // type:increment，handler第一个参数是state；state.count += n}}
})//使用mutationstore.commit('increment')  //调用type，触发handler（state）
或者import { mapMutations } from 'vuex'export default {methods: {...mapMutations(['increment' // 映射 this.increment() 为    this.$store.commit('increment')]),

Action 提交的是 mutation，而不是直接变更状态. Action 是异步的，mutation是同步的。

vuex学习---简介的案例：这里是加10 减1

在store.js 中代码为：

import Vue from 'vue'
import Vuex from 'vuex'//使用vuex模块
Vue.use(Vuex);//声明静态常量为4
const state = {count : 4
};const mutations = {add(state,n){state.count +=n.a;},sub(state){state.count--;}
};const actions = {//2种书写方式addplus(context){ //可以理解为代表了整个的contextcontext.commit('add',{a:10}) },subplus({commit}){commit('sub');}
};//导出一个模块
export default new Vuex.Store({state,mutations,actions
})

2.在App.vue中代码如下：

<template><div id="app"> <div id="appaaa"> <h1>这是vuex的示例</h1> <p>组件内部count{{count}}</p> <p> <button @click = "addplus">+</button> <button @click = "subplus">-</button> </p> </p> </div> </div> </template> <script> //引入mapGetters import {mapState,mapMutations,mapGetters,mapActions} from 'vuex' export default { name:'app', data(){ return { } }, computed:{ ...mapState([ "count" ]), }, methods:{ ...mapActions([ "addplus", "subplus" ]) } } </script> <style> </style>

mapXXXX

核心：map其实就是一个在store文件中的映射而已，就是不用让你要调用一个值需要敲这么多代码

如果有以下的定义方式：

methods: {...mapActions(['foo','bar'])
}

则相当于

methods: {foo(...args) {return this.$store.dispatch.apply(this.$store, ['foo'].concat(args))}bar(...args) {return this.$store.dispatch.apply(this.$store, ['bar'].concat(args))}
}

官网的vuex的例子中，有这种写法：

methods: {...mapActions(['some/nested/module/foo','some/nested/module/bar'])
}

则相当与

methods: {foo(val){return this.$store.dispatch('some/nested/module/foo', val))}//bar 省略....})
}

vuex实例: http://www.jb51.net/article/110212.htm

vue在同一个组件内；

methods中的一个方法调用methods中的另外一个方法

可以在调用的时候 this.$options.methods.xxx()

在App.vue组件中使用mapMutations传参，修改state数据（状态）
要点：要写在methods下面，因为mapActions/mapMutations只是把action/mutation函数绑定到你的methods里了;你调methods里的方法的时候照常传参就可以了。

npm rm vuex --save

然后安装最新的vuex

npm install vuex --save

try{const res = await getAdminInfo(username)if (res.code == '1') {console.log(res.data); commit('saveAdminInfo', res.data); }else{throw new Error(res) }}catch(err){console.log('您尚未登陆或者session失效')}

转载于:https://www.cnblogs.com/zhaojinxin/p/8528551.html

Vuex-状态管理模式相关推荐

vuex状态管理模式：入门demo（状态管理仓）
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 ...
Vuex状态管理模式-M
Vuex Vuex 是一个专为 Vue.js 开发的状态管理模式.主要是是做数据交互,父子组件传值可以很容易办到,但是兄弟组件间传值(兄弟组件下又有父子组件),页面多并且一层嵌套一层的传值,非常麻烦, ...
Vuex 状态管理模式（使用）
一.Vuex简介 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 二.使用 1.安装依赖 ...
理解vuex -- vue的状态管理模式
2019独角兽企业重金招聘Python工程师标准>>> vuex是什么? 先引用vuex官网的话: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管 ...
mount 返回状态_状态管理模式 — Vuex如何使用？
Extract 试想当我们在开发一个Vue应用程序时,如果在一个项目中频繁的使用组件传参的方式来同步data中的值,一旦项目结构变得复杂,管理和维护这些数据将变得十分繁琐,为此,Vue为这些被多个组件 ...
【Vue.js】全局状态管理模式插件vuex
文章目录全局状态管理模式Vuex vuex是什么? 什么是"状态管理模式"? vuex的应用场景 Vuex安装开始核心概念一.State 1.单一状态树 2.在 Vue 组 ...
状态管理模式 - vuex 的使用介绍
前言大家好,不知道大家在用 vue 进行开发过程中有没有遇到这样一种场景,就是有些时候一些数据是一种通用的共享数据(比如登录信息),那么这类数据在各个组件模块中可能都会用到,如果每个组件中都去后台重 ...
vue从入门到进阶：Vuex状态管理（十）
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 在 Vue 之后引入 vuex 会进行自动 ...
vue2中vuex状态管理的理解（菜单面包板）
本片理解基于vue2对应的Vuex文档,结合了官网文档以及众多前辈大佬所发布的帖子,由衷表示感谢. vuex的超详细讲解和具体使用细节记录随着我们进一步扩展约定,即组件不允许直接变更属于 store ...
[vuex]状态管理vuex
vuex 状态管理vuex,之前一般都是通过一个全局js文件实现全局设置,在vue中通过vuex进行管理简介 vuex是专为vue.js应用程序开发的状态管理模式.它采用集中存储管理应用的所有组件的 ...

Vuex-状态管理模式

Vuex-状态管理模式相关推荐

最新文章

热门文章