vuex所有核心概念完整解析State Getters Mutations Actions
vuex是解决vue组件和组件间相互通信而存在的,vuex理解起来稍微复杂,但一旦看懂则即为好用:
安装:
npm install --save vuex
引入
import Vuex from 'vuex' import Vue from 'vue' Vue.use(Vuex)
vuex的几个参数的介绍
State 储存初始化数据
Getters 对State 里面的数据二次处理(对数据进行过滤类似filter的作用)比如State返回的为一个对象,我们想取对象中一个键的值用这个方法
Mutations 对数据进行计算的方法全部写在里面(类似computed) 在页面中触发时使用this.$store.commit('mutationName') 触发Mutations方法改变state的值
Actions 处理Mutations中已经写好的方法 其直接触发方式是 this.$store.dispatch(actionName)
我们先不急着了解更多先打印下Vuex
console.log(Vuex) //Vuex为一个对象里面包含 Vuex ={ Store:function Store(){}, mapActions:function(){}, // 对应Actions的结果集 mapGetters:function(){}, //对应Getters的结果集 mapMutations:function(){}, //对应Mutations的结果集 mapState:function(){}, //对应State的结果集 install:function install(){}, //暂时不做讲解 installed:true //暂时不做讲解 } //如果我们只需要里面的State时我们可以这样写 import { mapState } from 'vuex'; import { mapGetters, mapMutations } from 'vuex'; //如果需要引用多个时用这种方式处理
反复看上面的内容是不是就豁然开朗了接下来我们进行依次举例和用官方的语言描述
State
State负责存储整个应用的状态数据,一般需要在使用的时候在跟节点注入store对象,后期就可以使用this.$store.state直接获取状态
//store为实例化生成的 import store from './store' new Vue({ el: '#app', store, render: h => h(App) })
这个store可以理解为一个容器,包含着应用中的state等。实例化生成store的过程是:
//./store文件 const store = new Vuex.Store({ state: { //放置state的值 count: 0, strLength:"abcd234" }, getters: { //放置getters方法 strLength: state => state.aString.length }, mutations: { //放置mutations方法 mutationName(state) { //在这里改变state中的数据 state.count = 100; } }, // 异步的数据操作 actions: { //放置actions方法 actionName({ commit }) { //dosomething commit('mutationName') }, getSong ({commit}, id) { api.getMusicUrlResource(id).then(res => { let url = res.data.data[0].url; }) .catch((error) => { // 错误处理 console.log(error); }); } } }); export default store;
后续在组件中使用的过程中,如果想要获取对应的状态你就可以直接使用this.$store.state获取,当然,也可以利用vuex提供的mapState辅助函数将state映射到计算属性中去,如
import {mapState} from 'vuex' export default { //组件中 computed: mapState({ count: state => state.count }) }
Getters
有些状态需要做二次处理,就可以使用getters。通过this.$store.getters.valueName对派生出来的状态进行访问。或者直接使用辅助函数mapGetters将其映射到本地计算属性中去。
在组件中使用方式
import {mapGetters} from 'vuex' export default { computed: mapGetters([ 'strLength' ]) }
Mutations
Mutations的中文意思是“变化”,利用它可以更改状态,本质就是用来处理数据的函数,其接收唯一参数值state。store.commit(mutationName)是用来触发一个mutation的方法。需要记住的是,定义的mutation必须是同步函数,否则devtool中的数据将可能出现问题,使状态改变变得难以跟踪。
在组件中触发:
export default { methods: { handleClick() { this.$store.commit('mutationName') } } }
或者使用辅助函数mapMutations直接将触发函数映射到methods上,这样就能在元素事件绑定上直接使用了。如:
import {mapMutations} from 'vuex' export default { methods: mapMutations([ 'mutationName' ]) }
Actions
Actions也可以用于改变状态,不过是通过触发mutation实现的,重要的是可以包含异步操作。其辅助函数是mapActions与mapMutations类似,也是绑定在组件的methods上的。如果选择直接触发的话,使用this.$store.dispatch(actionName)方法。
在组件中使用
import {mapActions} from 'vuex' //我是一个组件 export default { methods: mapActions([ 'actionName', ]) }
Plugins
插件就是一个钩子函数,在初始化store的时候引入即可。比较常用的是内置的logger插件,用于作为调试使用。
//写在./store文件中 import createLogger from 'vuex/dist/logger' const store = Vuex.Store({ ... plugins: [createLogger()] })
相关文章
- 线程的概念
- 新概念 Lesson 9 How do you do? 你好! our,your,their复数形式的形容词性物主代词
- 2.1.5 线程概念和多线程模型
- 《Python数据挖掘:概念、方法与实践》扩展你的数据挖掘工具箱
- 《数据库技术原理与应用教程第2版》——3.4概念世界与概念模型
- Linux 教程(手册):Linux 初学者必了解的概念(常用命令以及操作解析)
- RabbitMQ 的核心概念
- 支持向量机(SVM)必备概念(凸集和凸函数,凸优化问题,软间隔,核函数,拉格朗日乘子法,对偶问题,slater条件、KKT条件)
- 服务器与客户端概念
- 线程的局部变量ThreadLocal概念
- 《嵌入式Linux与物联网软件开发——C语言内核深度解析》一1.3 位、字节、半字、字的概念和内存位宽
- 《精通软件性能测试与LoadRunner最佳实战》—第1章1.2节软件相关概念解析
- 链接器,符号解析与重定位-概念
- 高数 | 【概念剖析】一元、二元微分,连续、可微、可偏导、偏导连续的超强通俗解析!
- OTL翻译(2) -- OTL流的概念
- 思曼达应用智慧城市新概念 推进中国教育信息化
- 浅析Node.js的宏任务与微任务、本轮与次轮循环、事件循环概念及其6个阶段解析以及代码分析nodejs与浏览器的Event Loop差异
- 浅析Docker Swarm集群管理:基本笔记、简介、集群演讲历史、常用命令、swarm工作模式、swarm的关键概念及调度策略、Cluster集群模式特性
- webpack高级概念,可视化分析包大小 webpack-bundle-analyzer,以及Preloading,Prefetching(系列七)
- #华为 #usg 华为防火墙安全区域的概念
- 关于消息队列的概念和选型
- 概念火热 智能家居究竟是否值得改装?
- 【计算机网络基础】TCP/IP、HTTP、Socket的概念