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. ...
随机推荐
- BZOJ-1086 [SCOI2005]王室联邦 (树分块)
递归处理子树,把当前结点当作栈底,然后递归,回溯回来之后如果栈中结点数量到达某一个标准时,弹出栈中所有的元素分到一个块中,最后递归结束了如果栈中还有元素,那么剩下的这些元素放在新的块中 题目:BZOJ ...
- HDU5407 CRB and Candies 【LCM递推】
HDU5407 CRB and Candies 题意: 计算\(LCM(C(n,0),C(n,1),C(n,2),\cdots,C(n,n-1),C(n,n))\) \(n\le 10^6\) 题解: ...
- 4.安装etcdkeeper查看etcd数据库中的数据
作者 微信:tangy8080 电子邮箱:914661180@qq.com 更新时间:2019-06-24 12:47:59 星期一 欢迎您订阅和分享我的订阅号,订阅号内会不定期分享一些我自己学习过程 ...
- Http和Https之为什么Https更安全
[除夕了,加油干.希望自己新的一年万事顺意,祝大家身体健康,心想事成!] 我们都知道 HTTPS 安全,可是为什么安全呢? 看小电影还是浏览正常网站,一定要检查是不是 HTTPS 的,因为Https相 ...
- 牛客网多校第5场 F take 【思维+数学期望】
题目:戳这里 思路来源:视频讲解 题意:有n个箱子按1...n标号,每个箱子有大小为di的钻石概率为pi,我们初始有个大小为0的钻石,从1到n按顺序打开箱子,遇到比手中大的箱子就换,求交换次数的数学期 ...
- hash table
Hash Table,叫做哈希表,也叫做散列表.概念:通过某种对应关系h,使得每一个元素和储存位置一一对应.这种对应关系称为哈希函数.它最大的优点就是插入.搜索和删除得很快(O(1)).碰撞(Coll ...
- C# 类 (10) - 命名空间NameSpace
NameSpace 命名空间是一系列 类型的集合,比如很多方法,很多类,集合在一个空间(myspace)里,谁想用就先 using myspace,然后直接用不using myspace的话,想用里面 ...
- Docker in Action All In One
Docker in Action All In One Docker https://www.docker.com/play-with-docker https://hub.docker.com/ $ ...
- 微信小程序-生命周期图解
微信小程序-生命周期图解 小程序生命周期 App 生命周期 https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.htm ...
- KMP 算法 & 字符串查找算法
KMP算法 Knuth–Morris–Pratt algorithm 克努斯-莫里斯-普拉特 算法 algorithm kmp_search: input: an array of character ...