vuex入门最详细整理


Posted in Javascript onMarch 04, 2020

如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 。

我在使用基于 vue.js 2.0 的UI框架 ElementUI 开发网站的时候 , 就遇到了这种问题 : 一个页面有很多表单 , 我试图将表单写成一个单文件组件 , 但是表单 ( 子组件 ) 里的数据和页面 ( 父组件 ) 按钮交互的时候 , 它们之间的通讯很麻烦 :

<!--父组件中引入子组件-->
<template>
 <div>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="show = true">点击</a>
  <t-dialog :show.sync="show"></t-dialog>
 </div>
</template>

<script>
import dialog from './components/dialog.vue'
export default {
 data(){
  return {
   show:false
  }
 },
 components:{
  "t-dialog":dialog
 }
}
</script>


<!--子组件-->
<template>
 <el-dialog :visible.sync="currentShow"></el-dialog>
</template>

<script>
export default {
 props:['show'],
 computed:{
   currentShow:{
     get(){
       return this.show
     },
     set(val){
       this.$emit("update:show",val)
     }
   }
 }
}
</script>

之所以这么麻烦 , 是因为父组件可以通过 props 给子组件传递参数 , 但子组件内却不能直接修改父组件传过来的参数。

这时候 , 使用 vuex 就可以比较方便的解决这种问题了 :

<!--父组件中引入子组件-->
<template>
 <div>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="$store.state.show = true">点击</a>
  <t-dialog></t-dialog>
 </div>
</template>

<script>
import dialog from './components/dialog.vue'
export default {
 components:{
  "t-dialog":dialog
 }
}
</script>


<!--子组件-->
<template>
 <el-dialog :visible.sync="$store.state.show"></el-dialog>
</template>

<script>
export default {}
</script>

是不是方便了许多 , 这就是 vuex 最简单的应用 , 不要被网上其他教程吓到 , vuex 原来可以这么简单 !

安装、使用 vuex

首先我们在 vue.js 2.0 开发环境中安装 vuex :

npm install vuex --save

然后 , 在 main.js 中加入 :

import vuex from 'vuex'
Vue.use(vuex);
var store = new vuex.Store({//store对象
  state:{
    show:false
  }
})

再然后 , 在实例化 Vue对象时加入 store 对象 :

new Vue({
 el: '#app',
 router,
 store,//使用store
 template: '<App/>',
 components: { App }
})

完成到这一步 , 上述例子中的 $store.state.show 就可以使用了。

modules

前面为了方便 , 我们把 store 对象写在了 main.js 里面 , 但实际上为了便于日后的维护 , 我们分开写更好 , 我们在 src 目录下 , 新建一个 store 文件夹 , 然后在里面新建一个 index.js :

import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex);

export default new vuex.Store({
  state:{
    show:false
  }
})

那么相应的 , 在 main.js 里的代码应该改成 :

//vuex
import store from './store'

new Vue({
 el: '#app',
 router,
 store,//使用store
 template: '<App/>',
 components: { App }
})

这样就把 store 分离出去了 , 那么还有一个问题是 : 这里 $store.state.show 无论哪个组件都可以使用 , 那组件多了之后 , 状态也多了 , 这么多状态都堆在 store 文件夹下的 index.js 不好维护怎么办 ?

我们可以使用 vuex 的 modules , 把 store 文件夹下的 index.js 改成 :

import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex);

import dialog_store from '../components/dialog_store.js';//引入某个store对象

export default new vuex.Store({
  modules: {
    dialog: dialog_store
  }
})

这里我们引用了一个 dialog_store.js , 在这个 js 文件里我们就可以单独写 dialog 组件的状态了 :

export default {
  state:{
    show:false
  }
}

做出这样的修改之后 , 我们将之前我们使用的 $store.state.show 统统改为 $store.state.dialog.show 即可。

如果还有其他的组件需要使用 vuex , 就新建一个对应的状态文件 , 然后将他们加入 store 文件夹下的 index.js 文件中的 modules 中。

modules: {
  dialog: dialog_store,
  other: other,//其他组件
}

mutations

前面我们提到的对话框例子 , 我们对vuex 的依赖仅仅只有一个 $store.state.dialog.show 一个状态 , 但是如果我们要进行一个操作 , 需要依赖很多很多个状态 , 那管理起来又麻烦了 !

mutations 登场 , 问题迎刃而解 :

export default {
  state:{//state
    show:false
  },
  mutations:{
    switch_dialog(state){//这里的state对应着上面这个state
      state.show = state.show?false:true;
      //你还可以在这里执行其他的操作改变state
    }
  }
}

使用 mutations 后 , 原先我们的父组件可以改为 :

<template>
 <div id="app">
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="$store.commit('switch_dialog')">点击</a>
  <t-dialog></t-dialog>
 </div>
</template>

<script>
import dialog from './components/dialog.vue'
export default {
 components:{
  "t-dialog":dialog
 }
}
</script>

使用 $store.commit('switch_dialog') 来触发 mutations 中的 switch_dialog 方法。

这里需要注意的是:

1、mutations 中的方法是不分组件的 , 假如你在 dialog_stroe.js 文件中的定义了

switch_dialog 方法 , 在其他文件中的一个 switch_dialog 方法 , 那么

$store.commit('switch_dialog') 会执行所有的 switch_dialog 方法。

2、mutations里的操作必须是同步的。

你一定好奇 , 如果在 mutations 里执行异步操作会发生什么事情 , 实际上并不会发生什么奇怪的事情 , 只是官方推荐 , 不要在 mutationss 里执行异步操作而已。

actions

多个 state 的操作 , 使用 mutations 会来触发会比较好维护 , 那么需要执行多个 mutations 就需要用 action 了:

export default {
  state:{//state
    show:false
  },
  mutations:{
    switch_dialog(state){//这里的state对应着上面这个state
      state.show = state.show?false:true;
      //你还可以在这里执行其他的操作改变state
    }
  },
  actions:{
    switch_dialog(context){//这里的context和我们使用的$store拥有相同的对象和方法
      context.commit('switch_dialog');
      //你还可以在这里触发其他的mutations方法
    },
  }
}

那么 , 在之前的父组件中 , 我们需要做修改 , 来触发 action 里的 switch_dialog 方法:

<template>
 <div id="app">
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="$store.dispatch('switch_dialog')">点击</a>
  <t-dialog></t-dialog>
 </div>
</template>

<script>
import dialog from './components/dialog.vue'
export default {
 components:{
  "t-dialog":dialog
 }
}
</script>

使用 $store.dispatch('switch_dialog') 来触发 action 中的 switch_dialog 方法。

官方推荐 , 将异步操作放在 action 中。

getters

getters 和 vue 中的 computed 类似 , 都是用来计算 state 然后生成新的数据 ( 状态 ) 的。

还是前面的例子 , 假如我们需要一个与状态 show 刚好相反的状态 , 使用 vue 中的 computed 可以这样算出来 :

computed(){
  not_show(){
    return !this.$store.state.dialog.show;
  }
}

那么 , 如果很多很多个组件中都需要用到这个与 show 刚好相反的状态 , 那么我们需要写很多很多个 not_show , 使用 getters 就可以解决这种问题 :

export default {
  state:{//state
    show:false
  },
  getters:{
    not_show(state){//这里的state对应着上面这个state
      return !state.show;
    }
  },
  mutations:{
    switch_dialog(state){//这里的state对应着上面这个state
      state.show = state.show?false:true;
      //你还可以在这里执行其他的操作改变state
    }
  },
  actions:{
    switch_dialog(context){//这里的context和我们使用的$store拥有相同的对象和方法
      context.commit('switch_dialog');
      //你还可以在这里触发其他的mutations方法
    },
  }
}

我们在组件中使用 $store.state.dialog.show 来获得状态 show , 类似的 , 我们可以使用 $store.getters.not_show 来获得状态 not_show 。

注意 : $store.getters.not_show 的值是不能直接修改的 , 需要对应的 state 发生变化才能修改。

mapState、mapGetters、mapActions

很多时候 , $store.state.dialog.show 、$store.dispatch('switch_dialog') 这种写法又长又臭 , 很不方便 , 我们没使用 vuex 的时候 , 获取一个状态只需要 this.show , 执行一个方法只需要 this.switch_dialog 就行了 , 使用 vuex 使写法变复杂了 ?

使用 mapState、mapGetters、mapActions 就不会这么复杂了。

以 mapState 为例 :

<template>
 <el-dialog :visible.sync="show"></el-dialog>
</template>

<script>
import {mapState} from 'vuex';
export default {
 computed:{

  //这里的三点叫做 : 扩展运算符
  ...mapState({
   show:state=>state.dialog.show
  }),
 }
}
</script>

相当于 :

<template>
 <el-dialog :visible.sync="show"></el-dialog>
</template>

<script>
import {mapState} from 'vuex';
export default {
 computed:{
  show(){
    return this.$store.state.dialog.show;
  }
 }
}
</script>

mapGetters、mapActions 和 mapState 类似 , mapGetters 一般也写在 computed 中 , mapActions 一般写在 methods 中。

弄懂上面这些 , 你可以去看vuex文档了 , 应该能看懂了。

以上就是vuex入门最详细整理的详细内容,更多关于vuex入门知识点的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
js实现ASP分页函数 HTML分页函数
Sep 22 Javascript
获取表单控件原始(初始)值的方法
Aug 21 Javascript
利用javascript实现web页面中指定区域打印
Oct 30 Javascript
JavaScript动态改变div属性的实现方法
Jul 22 Javascript
基于jQuery实现滚动刷新效果
Jan 09 Javascript
基于Node.js实现压缩和解压缩的方法
Feb 13 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
Mar 01 Javascript
浅谈Node 调试工具入门教程
Mar 20 Javascript
node.js环境搭建图文详解
Sep 19 Javascript
教你完全理解ReentrantLock重入锁
Jun 03 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
Jan 12 Javascript
JavaScript实现酷炫的鼠标拖尾特效
Feb 18 Javascript
JavaScript 严格模式(use strict)用法实例分析
Mar 04 #Javascript
vue 自定义组件的写法与用法详解
Mar 04 #Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
Mar 04 #Javascript
vue请求数据的三种方式
Mar 04 #Javascript
使用Vue 自定义文件选择器组件的实例代码
Mar 04 #Javascript
JS中==、===你分清楚了吗
Mar 04 #Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
Mar 04 #Javascript
You might like
配置最新的PHP加MYSQL服务器
2006/10/09 PHP
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
PHP实现的ID混淆算法类与用法示例
2018/08/10 PHP
JavaScript 语法集锦 脚本之家基础推荐
2009/11/15 Javascript
Js放到HTML文件中的哪个位置有什么区别
2013/08/21 Javascript
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
一行命令搞定node.js 版本升级
2014/07/20 Javascript
JavaScript获取网页表单提交方式的方法
2015/04/02 Javascript
AngularJs表单验证实例详解
2016/05/30 Javascript
sea.js常用的api简易文档
2016/11/15 Javascript
Bootstrap源码学习笔记之bootstrap进度条
2016/12/24 Javascript
jQuery事件与动画基础详解
2017/02/23 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
JavaScript创建、读取和删除cookie
2019/09/03 Javascript
js实现简易拖拽的示例
2020/10/26 Javascript
python抓取网页内容示例分享
2014/02/24 Python
详解Python的单元测试
2015/04/28 Python
python实现在windows服务中新建进程的方法
2015/06/30 Python
详解python中requirements.txt的一切
2017/03/03 Python
Python2中文处理纪要的实现方法
2018/03/10 Python
对python捕获ctrl+c手工中断程序的两种方法详解
2018/12/26 Python
使用虚拟环境打包python为exe 文件的方法
2019/08/29 Python
python制作英语翻译小工具代码实例
2019/09/09 Python
Python绘图实现显示中文
2019/12/04 Python
python统计mysql数据量变化并调用接口告警的示例代码
2020/09/21 Python
Waterford加拿大官方网站:世界著名的水晶杯品牌
2016/11/01 全球购物
国际奢侈品品牌童装购物网站:Designer Childrenswear
2019/05/08 全球购物
一个C/C++编程面试题
2013/11/10 面试题
生日寿宴答谢词
2014/01/19 职场文书
理财学专业自荐书
2014/06/28 职场文书
市级三好学生评语
2014/12/29 职场文书
导游词之徐州云龙湖
2019/11/19 职场文书
使用Redis实现秒杀功能的简单方法
2021/05/08 Redis
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js
SQL实现LeetCode(180.连续的数字)
2021/08/04 MySQL