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 相关文章推荐
prototype 的说明 js类
Sep 07 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
Jun 28 Javascript
node.js中的fs.fchmodSync方法使用说明
Dec 16 Javascript
javascript 常见功能汇总
Jun 11 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
Jun 19 Javascript
浅谈jQuery.easyui的datebox格式化时间
Jun 25 Javascript
jQuery解决input超多的表单提交
Aug 10 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
Apr 01 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
Apr 19 Javascript
Javascript的无new构建实例详解
May 15 Javascript
详解vue移动端日期选择组件
Feb 22 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
Mar 19 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中的MVC模式运用技巧
2007/05/03 PHP
destoon复制新模块的方法
2014/06/21 PHP
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
Jquery跳到页面指定位置的方法
2014/05/12 Javascript
Javascript中数组方法汇总(推荐)
2015/04/01 Javascript
javascript 常用验证函数总结
2016/06/28 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
javascript实现延时显示提示框效果
2017/06/01 Javascript
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
JavaScript编写的网页小游戏,很给力
2017/08/18 Javascript
微信小程序实现YDUI的ScrollTab组件
2018/02/02 Javascript
vue项目中使用fetch的实现方法
2019/04/25 Javascript
javascript实现blob加密视频源地址的方法
2019/08/08 Javascript
JS使用Chrome浏览器实现调试线上代码
2020/07/23 Javascript
[01:32]2014DOTA2西雅图邀请赛 CIS我们有信心进入正赛
2014/07/08 DOTA
Django进阶之CSRF的解决
2018/08/01 Python
python爬虫-模拟微博登录功能
2019/09/12 Python
Python GUI库PyQt5样式QSS子控件介绍
2020/02/25 Python
如何实现在jupyter notebook中播放视频(不停地展示图片)
2020/04/23 Python
MoviePy常用剪辑类及Python视频剪辑自动化
2020/12/18 Python
Eton丹麦官网:精美的男式衬衫
2020/05/27 全球购物
万代美国官网:PREMIUM BANDAI USA
2020/09/11 全球购物
南京某公司笔试题
2013/01/27 面试题
建筑施工实习自我鉴定
2013/09/19 职场文书
应届毕业生自我评价分享
2013/12/15 职场文书
人事文员岗位职责
2014/02/16 职场文书
绿色环保口号
2014/06/12 职场文书
第一批党的群众路线教育实践活动总结报告
2014/07/03 职场文书
园林技术专业求职信
2014/07/28 职场文书
公司党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2014年度培训工作总结
2014/11/27 职场文书
2015年导购员工作总结
2015/04/25 职场文书
Redis Cluster集群动态扩容的实现
2021/07/15 Redis
MySQL子查询中order by不生效问题的解决方法
2021/08/02 MySQL
python读取mat文件生成h5文件的实现
2022/07/15 Python