Vuex理解与使用
1.Vuex是什么
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,用于管理页面的数据状态、提供统一数据操作的生态系统。在组件中可以任意获取仓库中的数据。和Vuex类似的还有redux,redux一般在react中使用比较多。
----来自官方示例图
1.在组件中,通过dispatch一个Actions->Mutations->State,最后渲染组件
2.其中在actions可以异步操作。不需要异步操作时,只需要commit一个mutions去修改仓库中的数据,然后组件就会渲染。
3.并且vuex是响应式的,如果仓库(state)中的数据被更改了,那么页面也会相应的更新
4.其中vuex规定了。仓库(state)中的数据更改必须通过mutations。不可以直接修改。
2.安装
1.通过src方式引入静态文件
<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>
2.通过npm/yarn安装
npm install vuex -S
yarn add vuex
3.注入vuex
在cli中新建index.js,通过import vuex from 'vuex'引入
import Vue from 'vue';
import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({
state: {},
mutations: {},
actions: {},
modules: {}
});
main.js import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store'; Vue.config.productionTip = false; new Vue({
router,
store,
render: h => h(App)
}).$mount('#app');
3.核心概念
State:
1.说明:
仓库中的数据都保存在这。并且全局只有一个唯一实例,以对象形式存在
2.基本使用:
// index.js
import Vue from 'vue';
import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({
state: {
count: 1
},
mutations: {},
actions: {},
modules: {}
});
组件中:
<template>
<div>
<p>state中的count:{{ $store.state.count }}</p>
</div>
</template> <script>
export default {
created() {
console.log(this.$store.state.count);
}
};
</script> <style scoped lang="scss">
* {
margin: 0;
font-size: 20px;
}
</style>
通过this.$store.state获取仓库所有数据
3.辅助函数
mapState:返回的是一个对象
1.引入:在组件中import { mapState } from 'vuex'
2.使用:mapState和computed
<template>
<div>
<p>state中的count:{{ count }}</p>
<p>{{ sum }}</p>
</div>
</template> <script>
import { mapState } from 'vuex';
export default {
data() {
return {
a: 1,
b: 2
};
},
created() {
// console.log(this.$store.state.count);
},
computed: mapState({
// 返回state中的count
count: state => state.count, // 其它计算属性
sum() {
return this.a + this.b;
}
})
};
</script>
3.使用扩展运算符...简化
computed: {
// 使用字符串数组写法
...mapState(['count']),
// 其它计算属性
sum() {
return this.a + this.count;
}
}
computed: {
// 使用对象写法
...mapState({
countAlias: 'count'
}),
// 其它计算属性
sum() {
return this.a + this.countAlias;
}
}
Getters:
1.说明:
getters就是将state中的数据包装一个在返回,接受第一个参数state,可以访问state中的数据。也可以接受第二个参数其它的getter
2.基本使用
import Vue from 'vue';
import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({
state: {
list: [1, 2, 3, 4, 5, 6]
},
getters: {
filterList: state => {
return state.list.filter(i => i > 3);
}
},
mutations: {},
actions: {},
modules: {}
});
import Vue from 'vue';
import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({
state: {
count: 1,
list: [1, 2, 3, 4, 5, 6]
},
getters: {
// 使用其他getters
initData: (state, getters) => {
return getters.filterList.map(i => i + state.count);
},
filterList: state => {
return state.list.filter(i => i > 3);
}
},
mutations: {},
actions: {},
modules: {}
});
组件中:
<template>
<div>
<p>getter中的sum返回值:{{ $store.getters.filterList }}</p>
<p>使用其他getter:{{ $store.getters.initData }}</p>
</div>
</template> <script>
export default {
data() {
return {
a: 1
};
},
created() {
console.log(this.$store.getters.filterList);
},
computed: {}
};
</script>
通过this.$store.getter获取所有getters
3.在getter中返回一个函数,实现使用getter时传参
getters: {
filterList: state => data => {
return state.list.find(i => i === data);
}
}, <template>
<div>
<p>getter中的sum返回值:{{ $store.getters.filterList(2) }}</p>
</div>
</template>
3.辅助函数:
mapGetters
1.引入:import { mapGetters } from 'vuex';
2.使用:mapGetters和computed
传递字符串数组
<template>
<div>
<p>getter中的sum返回值:{{ filterList(2) }}</p>
</div>
</template> <script>
import { mapGetters } from 'vuex';
export default {
data() {
return {
a: 1
};
},
created() {
console.log(this.$store.getters.filterList);
},
computed: {
...mapGetters(['filterList'])
}
};
</script>
使用对象形式
<template>
<div>
<p>getter中的sum返回值:{{ filterListAlias(2) }}</p>
</div>
</template> <script>
import { mapGetters } from 'vuex';
export default {
data() {
return {
a: 1
};
},
created() {
console.log(this.$store.getters.filterList);
},
computed: {
...mapGetters({
filterListAlias: 'filterList'
})
}
};
</script>
Mutation
1.说明:
mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数
在mutation中不可以做异步操作
2.基本使用
import Vue from 'vue';
import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({
state: {
count: 1
},
getters: {},
mutations: {
increment(state) {
state.count++;
}
},
actions: {},
modules: {}
});
组件中:
<template>
<div>
<p>state中的count:{{ $store.state.count }}</p>
<button @click="clickFn">+</button>
</div>
</template> <script>
export default {
data() {
return {
a: 1
};
},
created() {},
methods: {
clickFn() {
this.$store.commit('increment');
}
}
};
</script>
通过this.$store.commit('increment');方式修改state中的数据。注意这里的increment解释为mutation的事件类型,并不是函数名称
a.传参使用,接受第二个参数payload
定义:
mutations: {
increment(state, payload) {
state.count += payload;
}
}, 组件使用:
methods: {
clickFn() {
this.$store.commit('increment', '我是参数');
}
}
b.提交方式,一般使用对象形式提交
methods: {
clickFn() {
this.$store.commit({
type: 'increment',
data: '我是参数1',
data2: '我是参数2'
});
}
} mutations: {
increment(state, payload) {
state.count = state.count + payload.data + payload.data2;
}
},
c.使用常量代替mutation类型事件
1.新建mutation-types.js文件
export const SOME_MUTATION = 'someMutation';
2.引入定义的类型,并使用
import Vue from 'vue';
import Vuex from 'vuex';
import { SOME_MUTATION } from './mutationTypes'; Vue.use(Vuex); export default new Vuex.Store({
state: {
count: 1
},
getters: {},
mutations: {
[SOME_MUTATION](state, payload) {
state.count += payload.data;
}
},
actions: {},
modules: {}
});
3.在组件中使用
<template>
<div>
<p>state中的count:{{ $store.state.count }}</p>
<button @click="clickFn">+</button>
</div>
</template> <script>
import { SOME_MUTATION } from '../../store/mutationTypes';
export default {
data() {
return {
a: 1
};
},
created() {},
methods: {
clickFn() {
this.$store.commit(SOME_MUTATION, {
data: 1
});
}
}
};
</script>
3.辅助函数
mapMutations
1.引入:import { mapMutations
} from 'vuex';
2.使用:mapMutations
和methods
使用类型时,使用对象形式,将SOME_MUTATION映射为add
mutations: {
[SOME_MUTATION](state, payload) {
state.count += payload.data;
}
}, methods: {
...mapMutations({
add: SOME_MUTATION
}),
clickFn() {
this.add({ data: 2 });
}
}
不使用类型时
mutations: {
add(state, payload) {
state.count += payload.data;
}
}, methods: {
...mapMutations(['add']),
clickFn() {
this.add({ data: 2 });
}
}
Action
1.说明:
action类似于mutation,但是action提交的是mutation,而不是直接修改state,也就是通过action提交mutation,然后commit修改state,action可以异步操作
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,通过context 访问context.state,context.commit,context.getters,context.dispatch等。
通过dispatch方法触发
2.基本使用
export default new Vuex.Store({
state: {
count: 1
},
getters: {},
mutations: {
add(state) {
state.count += 1;
}
},
actions: {
increment(context) {
context.commit('add');
}
},
modules: {}
});
组件中
<template>
<div>
<p>state中的count:{{ $store.state.count }}</p>
<button @click="add">+</button>
</div>
</template> <script>
export default {
data() {
return {
a: 1
};
},
created() {},
methods: {
add() {
this.$store.dispatch('increment');
}
}
};
</script>
通常会使用解构来简化代码
actions: {
increment({ commit, state, getters }) {
commit('add');
}
},
传递参数
methods: {
add() {
this.$store.dispatch('increment', {
data: 21
});
this.$store.dispatch({
type: 'increment',
data: 21
});
}
} export default new Vuex.Store({
state: {
count: 1
},
getters: {},
mutations: {
add(state, payload) {
state.count += payload.data;
}
},
actions: {
increment({ commit, state, getters }, payload) {
commit('add', payload);
}
},
modules: {}
});
辅助函数
mapActions
1.引入:import { mapActions
} from 'vuex';
2.使用:mapActions
和methods
methods: {
// ...mapActions(['increment']),
...mapActions({
incrementAlias: 'increment'
}),
add() {
this.incrementAlias({ data: 1 });
}
}
Module
略
Vuex理解与使用的更多相关文章
- vuex理解之modules小记
好记性不如烂笔头 demo预览 源代码 前情提要 关于vuex,其实很久以前就研究使用过,还研究过 flux,redux之类的体系,当时感觉对于 state,action,dispatch,views ...
- vuex 理解
为什么要用vuex?页面由多个视图组成,用户操作会引视图的状态变化. 多个视图依赖于同一状态(例如:菜单导航) 来自不同视图的行为需要变更同一状态(例如:评论弹幕) vuex 的作用 为vue.js开 ...
- VueX理解
什么是Vuex? 官方说法:Vuex 是一个专为 Vue.js应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 个人理解:Vue ...
- vuex所有核心概念完整解析State Getters Mutations Actions
vuex是解决vue组件和组件件相互通信而存在的,vue理解起来稍微复杂但一旦看懂择即为好用 安装: npm install --save vuex 引入 import Vuex from 'vuex ...
- vue2.x中请求之前数据显示以及vuex缓存的问题
在项目中遇到两个问题,简单的做个笔记来记录自己解决的问题,可能不是很好的处理办法,欢迎提出,自己还在不断优化中... 第一个是vue在加载页面的时候,会先加载静态资源,这个时候数据还没有请求回来,用户 ...
- 前端Vue框架-vuex状态管理详解
新人报道!多多关照-多提宝贵意见 谢谢- vuex理解 采用集中式存储管理模式.用来管理组件的状态,并以自定义规则去观测实时监听值得变化. 状态模式管理理解 属性 理解 state 驱动应用的数据源 ...
- MVC和MVVM设计模式简单理解
1.mvc设计模式理解 Model: 模型 持有所有的数据状态和业务逻辑; 泛指数据库,链接数据库,建立数据模型 View: 视图 用来展示数据模型在页面上,泛指前端 Controller: 控制器, ...
- 干货分享:vue2.0做移动端开发用到的相关插件和经验总结(2)
最近一直在做移动端微信公众号项目的开发,也是我首次用vue来开发移动端项目,前期积累的移动端开发经验较少.经过这个项目的锻炼,加深了对vue相关知识点的理解和运用,同时,在项目中所涉及到的微信api( ...
- Vue 全家桶
第 1 章:Vue 核心 1.1. Vue 的基本认识1.1.1. 官网1) 英文官网: https://vuejs.org/2) 中文官网: https://cn.vuejs.org/ 1.1.2. ...
随机推荐
- HDU3544 Alice's Game && POJ 2960 S-Nim(SG函数)
题意: 有一块xi*Yi的矩形巧克力,Alice只允许垂直分割巧克力,Bob只允许水平分割巧克力.具体来说,对于Alice,一块巧克力X i * Y i,只能分解成a * Y i和b * Y i其中a ...
- 2018-2019 ACM-ICPC, Asia Dhaka Regional Contest C.Divisors of the Divisors of An Integer (数论)
题意:求\(n!\)的每个因子的因子数. 题解:我们可以对\(n!\)进行质因数分解,这里可以直接用推论快速求出:https://5ab-juruo.blog.luogu.org/solution-p ...
- centos7+腾讯云服务器搭建wordpress
title: centos7+腾讯云服务器搭建wordpress date: 2020-03-04 categories: web tags: [wordpress] 分两部分:1.搭建LEMP环境 ...
- 爬虫入门一 基础知识 以及request
title: 爬虫入门一 基础知识 以及request date: 2020-03-05 14:43:00 categories: python tags: crawler 爬虫整体概述,基础知识. ...
- Leetcode(884)-索引处的解码字符串
给定一个编码字符串 S.为了找出解码字符串并将其写入磁带,从编码字符串中每次读取一个字符,并采取以下步骤: 如果所读的字符是字母,则将该字母写在磁带上. 如果所读的字符是数字(例如 d),则整个当前磁 ...
- 微信小程序开发抖音去水印功能
之前找了很多抖音去水印的工具全是广告,所以索性自己写了一个,提供给大家免费试用以下是微信小程序的二维码 使用教程: 1.打开微信搜索小程序:沸点软件技术服务 2.打开沸点软件技术服务小程序 3.去抖音 ...
- matplotlib 单figure多图
method 1 import numpy as np import matplotlib.pyplot as plt fg, axes = plt.subplots(1, 2, figsize=(1 ...
- js function All In One
js function All In One js ES5 Function & js Arrow Function Object vs Array 花括号 ?对象 , 傻傻分不清 // ar ...
- The best Fibonacci is achieved in js
The best Fibonacci is achieved in js the best realized by using js 斐波那契数列 "use strict"; /* ...
- Roman Numerals All In One
Roman Numerals All In One 罗马数字 refs https://www.mathsisfun.com/roman-numerals.html https://www.maths ...