vuex状态及mapState的基础用法详解 - 行业资讯 - 肥雀云

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

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

　　　　　　从“Vue”进口Vue 　　从“Vuex”进口Vuex 　　Vue.use (Vuex) 　　常量存储=new Vuex.Store ({ 　　状态:{ 　　数:0 　　} 　　出口默认存储　　　　

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

1, vue提供了注入机制,就是把我们的商店对象注入到根实例中.vue的根实例就是新的Vue 构造函数,然后在所有的子组件中,这个。美元商店来指向商店对象。在测试。js中,我们出口商店,把商店已经暴露出去了,新的Vue()在main.js中,所以直接在主。js中引入store 并注入即可。

　　　　　　从“Vue”进口Vue 　　导入应用程序从“/App。” 　　从“进口路由器。/路由器的　　从“进口商店。/商店/测试” 　　Vue.config。productionTip=false/* eslint-disable没有新*/新Vue ({ 　　埃尔:“#应用”, 　　路由器, 　　商店, 　　模板:& lt; App/祝辞, 　　组件:{应用} 　　}) 　　　　

2,在子组件中,用计算属性,计算属性是根据它的依赖自动更新的。所以只中要存储的状态发生变化,它就会自动变化,在显示。vue中作下面的更改,子组件中。商店就美元是指向商店对象。我们把测试。js里面变的数为8页面中就变为了8 .

　　　　　　& lt; template> 　　& lt; div> 　　& lt; h4>计数是{{数}}& lt;/h4> 　　& lt;/div> 　　& lt;/template> 　　& lt; script> 　　出口默认{ 　　计算:{ 　　count () { 　　返回这个。store.state.count美元　　} 　　} 　　} 　　& lt;/script> 　　　　

3,通过计算属性可以获取到状态值,但是组件中每一个属性(如:数)都是函数,如果有10个,那么就要写十个函数,且重复写十遍返回。美元商店。状态,不是很方便.vue提供了mapState函数,它把国家直接映射到我们的组件中。

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

对象用法如下:

　　　　　　& lt; script> 　　从“进口{mapState} vuex”;//引入mapState 　　出口默认{//下面这两种写法都可以　　计算:mapState ({ 　　数:状态=比;状态。//组数件内的每一个属性函数都会获得一个默认参数状态,然后通过国家直接获取它的属性更简洁　　数:“计数”//苯佑成涞焦叶韵笾械募剖?它相当于这个。store.state.count美元, 　　}）　　} 　　& lt;/script> 　　　　

数组的方法如下:

　　　　　　& lt; script> 　　从“进口{mapState} vuex”; 　　　　出口默认{ 　　计算:mapState([//数组　　“数” 　　]) 　　} 　　& lt;/script> 　　　　

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