vuex state及mapState的基础用法详解


Posted in Javascript onApril 19, 2018

先使用vue cli构建一个自己的vue项目

1.npm i -g vue-cli
2.vue init webpack sell (sell是你的项目名)
3.一路回车(在这个过程中会提示你是否安装一些依赖包,比如vue-router,es6语法检查等等,这些根据你个人习惯或者癖好选择Y/N)
4.npm i (这个是安装项目的依赖包)
5.npm run dev(启动你的vue项目) 这个时候如果在页面上看到了vue的logo说明你的vue的项目基础构建已经完成,然后你可以删除掉没有用的组件
6.webpack sell默认没有安装vuex, 所以要安装vuex; 在命令行中按两次ctrl+c 结束服务器,npm install  vuex ?save  安装vuex.
7.在你的src目录下新建一个vue的组件,我们姑且命名为helloVuex(这个命名你自己随意,开心就好)这个组件主要用来做主容器只展示内容
8.接着新建一个随便叫什么鬼的组件(这里我就叫display组件吧)用来接受state中的状态
9.下来我们在src目录下新建一个文件夹叫做store,在store下面新建一个js文件,叫做test.js(这里的store就是我们的前端数据仓库)用vuex 进行状态管理,store 是vuex的核心,所以命名为store 在src 目录下新建store 文件,在store 目录下新建test.js 文件(如下)。可以看到使用vuex 之前,要告诉 vue 使用它,Vue.use(Vuex); 我们这里只有一个变量count 需要管理,所以在创建 store 对象的时候,给构造函数传参,state 下面只有一个count, 且初始化为0。

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
 state: {
 count: 0
 }
export default store

现在所有的状态,也就是变量都放到了test.js中,那我们组件怎么才能获取到状态修值呢?这里有两个步骤需要操作

1, vue 提供了注入机制,就是把我们的store 对象注入到根实例中。vue的根实例就是 new Vue  构造函数,然后在所有的子组件中,this.$store 来指向store 对象。在test.js 中,我们export store, 把store已经暴露出去了,new Vue() 在main.js中,所以直接在main.js 中引入store  并注入即可。

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/test'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 store,
 template: '<App/>',
 components: { App }
})

2, 在子组件中,用computed 属性, computed 属性是根据它的依赖自动更新的。所以只要store中的state 发生变化,它就会自动变化。在display.vue 中作下面的更改, 子组件中 this.$store 就是指向store 对象。我们把 test.js 里面的count 变为8, 页面中就变为了8。

<template>
 <div>
  <h3>Count is {{count}}</h3>
 </div>
</template>
<script>
 export default {
  computed: {
   count () {
    return this.$store.state.count 
   }
  }
 }
</script>

3, 通过computed属性可以获取到状态值,但是组件中每一个属性(如:count)都是函数,如果有10个,那么就要写10个函数,且重复写10遍return this.$store.state,不是很方便。vue 提供了 mapState 函数,它把state 直接映射到我们的组件中。

当然使用mapState 之前要先引入它。它两种用法,或接受一个对象,或接受一个数组。还是在display.vue 组件下。

对象用法如下:

<script>
 import {mapState} from "vuex"; // 引入mapState 
 export default {


// 下面这两种写法都可以
  computed: mapState({
   count: state => state.count // 组件内的每一个属性函数都会获得一个默认参数state, 然后通过state 直接获取它的属性更简洁  
   count: 'count'



 // 'count' 直接映射到state 对象中的count, 它相当于 this.$store.state.count,
  })
 }
</script>

数组的方法如下:

<script>
 import {mapState} from "vuex";

 export default {
  computed: mapState([ // 数组
   "count"
  ])
 }
</script>

4,  还有最后一个问题,如果我们组件内部也有computed 属性怎么办?它又不属于mapState 中。那就用到了对象分割,把mapState函数生成的对象再分割成一个个的,就像最开始的时候,我们一个一个罗列计算属性,有10个属性,我们就写10个函数。

es6中的... 就是分割用的,但是只能分割数组。在ECMAScript stage-3 阶段它可以分割对象,所以这时还要用到babel-stage-3;  npm install babel-preset-stage-3 --save-dev, 安装完全后,一定不要忘记在babelrc 就是babel 的配置文件中,写入stage-3,

否则一直报错。在页面中添加个 p 标签,显示我们组件的计算熟悉

babelrc

{
 "presets": [
 ["env", {
  "modules": false,
  "targets": {
  "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
  }
 }],
 "stage-3"
 ],
 "plugins": ["transform-runtime"],
 "env": {
 "test": {
  "presets": ["env", "stage-3"],
  "plugins": ["istanbul"]
 }
 }
}

display.vue 组件更改后

<template>
 <div>
  <h3>Count is {{count}}</h3>
  <p>组件自己的内部计算属性 {{ localComputed }}</p>
 </div>
</template>
<script>
 import {mapState} from "vuex";
 export default {
  computed: {
   localComputed () {
    return this.count + 10;
   },
   ...mapState({
    count: "count"
   })
  } 
 }
</script>

把test.js 中state.count 改为10,  查看一个效果

vuex state及mapState的基础用法详解

下面看下Vuex中mapState的用法

今天使用Vuex的时候遇到一个坑,也可以说是自己的无知吧,折腾了好久,终于发现自己代码的错误了。真是天雷滚滚~~~~~~

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './action'
import getters from './getters'
Vue.use(Vuex)
const state = {
 userInfo: { phone: 111 }, //用户信息
 orderList: [{ orderno: '1111' }], //订单列表
 orderDetail: null, //订单产品详情
 login: false, //是否登录
}
export default new Vuex.Store({
 state,
 getters,
 actions,
 mutations,
})

computed: {
   ...mapState([
    'orderList',
    'login'
   ]),
  }, 
  mounted(){ 
   console.log(typeof orderList); ==>undefind
   console.log(typeof this.orderList)==>object
  }

mapState通过扩展运算符将store.state.orderList 映射this.orderList  这个this 很重要,这个映射直接映射到当前Vue的this对象上。

所以通过this都能将这些对象点出来,同理,mapActions, mapMutations都是一样的道理。牢记~~~

总结

以上所述是小编给大家介绍的vuex state及mapState的基础用法详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
Feb 23 Javascript
File文件控件,选中文件(图片,flash,视频)即立即预览显示
Apr 09 Javascript
IE下双击checkbox反应延迟问题的解决方法
Mar 27 Javascript
JQuery的attr 与 val区别
Jun 12 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
Oct 05 Javascript
js判断PC端与移动端跳转
Dec 24 Javascript
Vue实现路由跳转和嵌套
Jun 20 Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
爬虫利器Puppeteer实战
Jan 09 Javascript
原生js实现3D轮播图
Mar 21 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
Apr 26 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 Javascript
使用vuex的state状态对象的5种方式
Apr 19 #Javascript
react redux入门示例
Apr 19 #Javascript
JS实现读取xml内容并输出到div中的方法示例
Apr 19 #Javascript
使用typescript开发angular模块并发布npm包
Apr 19 #Javascript
Angular 封装并发布组件的方法示例
Apr 19 #Javascript
angular第三方包开发整理(小结)
Apr 19 #Javascript
如何从零开始利用js手写一个Promise库详解
Apr 19 #Javascript
You might like
php Smarty 字符比较代码
2011/02/27 PHP
PHP计算一年多少个星期和每周的开始和结束日期
2014/07/01 PHP
PHP遍历目录函数opendir()、readdir()、closedir()、rewinddir()总结
2014/11/18 PHP
php实现用于计算执行时间的类实例
2015/04/18 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
php cookie用户登录的详解及实例代码
2017/01/03 PHP
PHP封装的page分页类定义与用法完整示例
2018/12/24 PHP
PHP连接MySQL数据库三种实现方法
2020/12/10 PHP
js下用eval生成JSON对象
2010/09/17 Javascript
Javascript绝句欣赏 一些经典的js代码
2012/02/22 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
2016/06/12 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
2017/04/07 Javascript
基于 Vue 的树形选择组件的示例代码
2017/08/18 Javascript
原生JavaScript实现的简单放大镜效果示例
2018/02/07 Javascript
微信小程序实现评论功能
2018/11/28 Javascript
jquery+css3实现的经典弹出层效果示例
2020/05/16 jQuery
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
python调用OpenCV实现人脸识别功能
2018/05/25 Python
NumPy 数组使用大全
2019/04/25 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
Pycharm中使用git进行合作开发的教程详解
2020/11/17 Python
印尼最大的婴儿用品购物网站:Orami
2017/09/28 全球购物
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
公务员年总结的自我评价
2013/10/25 职场文书
技术经理的自我评价范文
2013/12/03 职场文书
后勤采购员岗位职责
2013/12/19 职场文书
大学生职业规划前言模板
2013/12/27 职场文书
称象教学反思
2014/02/03 职场文书
冬季安全检查方案
2014/05/23 职场文书
长江三峡导游词
2015/01/31 职场文书
秦兵马俑导游词
2015/02/02 职场文书
MySQL通过binlog恢复数据
2021/05/27 MySQL
手把手教你导入Go语言第三方库
2021/08/04 Golang
python编程实现清理微信重复缓存文件
2021/11/01 Python