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 相关文章推荐
jqPlot 图表中文API使用文档及源码和在线示例
Feb 07 Javascript
js仿百度有啊通栏展示效果实现代码
May 28 Javascript
jquery插件ajaxupload实现文件上传操作
Dec 09 Javascript
jQuery Ajax使用FormData对象上传文件的方法
Sep 07 Javascript
Angular2学习笔记——详解NgModule模块
Dec 02 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
Feb 18 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
Mar 29 Javascript
JS变量及其作用域
Mar 29 Javascript
详解利用 Express 托管静态文件的方法
Sep 18 Javascript
基于js中的原型(全面讲解)
Sep 19 Javascript
jQuery获取随机颜色的实例代码
May 21 jQuery
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
使用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数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
APACHE的AcceptPathInfo指令使用介绍
2013/01/18 PHP
php stream_get_meta_data返回值
2013/09/29 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
PHP用户注册邮件激活账户的实现代码
2017/05/31 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
JavaScript中的Screen屏幕对象
2008/01/16 Javascript
js select option对象小结
2013/12/20 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
jQuery 插件开发指南
2014/11/14 Javascript
jQuery中queue()方法用法实例
2014/12/29 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
AngularJS  双向数据绑定详解简单实例
2016/10/20 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
2016/12/13 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
2017/06/01 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
[01:05:24]Ti4 冒泡赛第二天 iG vs NEWBEE 3
2014/07/15 DOTA
Python 将Matrix、Dict保存到文件的方法
2018/10/30 Python
python经典趣味24点游戏程序设计
2019/07/26 Python
Python 实现文件读写、坐标寻址、查找替换功能
2019/09/11 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
Python读取文件内容为字符串的方法(多种方法详解)
2020/03/04 Python
Django ValuesQuerySet转json方式
2020/03/16 Python
Python作用域与名字空间原理详解
2020/03/21 Python
python except异常处理之后不退出,解决异常继续执行的实现
2020/04/25 Python
python rolling regression. 使用 Python 实现滚动回归操作
2020/06/08 Python
会计专业自我鉴定范文
2013/12/29 职场文书
行政助理的岗位职责
2014/02/18 职场文书
2014党委书记四风对照检查材料思想汇报
2014/09/21 职场文书
2015年环保局工作总结
2015/05/22 职场文书
小学生法制教育心得体会
2016/01/14 职场文书
创业计划书之书店
2019/09/10 职场文书
解决SpringCloud Feign传对象参数调用失败的问题
2021/06/23 Java/Android
instantclient客户端 连接oracle数据库
2022/04/26 Oracle