p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 }
p.p3 { margin: 0.0px 0.0px 2.0px 0.0px; font: 14.0px "Helvetica Neue"; color: #454545; min-height: 17.0px }
p.p4 { margin: 0.0px 0.0px 2.0px 0.0px; font: 14.0px ".PingFang SC"; color: #454545 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545; min-height: 14.0px }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px ".PingFang SC"; color: #454545 }
span.s1 { font: 12.0px ".PingFang SC" }
span.s2 { font: 12.0px "Helvetica Neue" }
span.s3 { font: 14.0px "Helvetica Neue" }
span.s4 { font: 17.0px ".Apple Color Emoji UI" }
vuex学习
Vuex入门其实很简单 当我们项目数据量很庞大的时候
比如一个接口数据在多个组件之间重复使用多次
我们这里采用的是vue-cli构建的项目目录
当然前面的npm install vux什么的就不说了
我们创建好store模块之后 首先你要确保你的实例上面有store
1.引入store 并且挂载在实例上
好，然后，创建目录我们的store的目录大概就是下面这样子
你可以使用单独的actions getters mutations 也可以使用模块化【modules】
我们这里采用的是模块化 modules 比如我们有一个狗【dog】的模块
【modules】 对象允许将单一的 Store 拆分为多个 Store 的同时保存在单一的状态树中。随着应用复杂度的增加，这种拆分能够更好地组织代码
先来看我们的【store/index.js】
这里我们就export一下store store里面是按照模块来的
继续 我们开始进入模块【dog.js】
首先你得有一个types吧 对不对 放在外面统一管理就好 后面引入即可
然后先看一下整体的代码结构
【别着急】我们依次展开了哈
【state】
state 定义了应用状态的数据结构，同样可以在这里设置默认的初始状态
【mutations】
调用 mutations 是唯一允许更新应用状态的地方。
【actions】
Actions 即是定义提交触发更改信息的描述，常见的例子有从服务端获取数据，在数据获取完成后会调用store.commit()来调用更改 Store 中的状态。可以在组件中使用dispatch来发出 Actions。
【getters】
Getters 允许组件从 Store 中获取数据，可以进行筛选等等 这里是可以进行数据操作的
最后 【输出一下】
OK了 一个简单的额vuex我们搭建完毕 我们回到我们的组件开始调用 怎么用呢
首先我们需要引入vuex的辅助函数 这里的话我引入三个 方便都看一下效果
辅助函数【mapState】【mapActions】【mapgetters】
我们在时间周期 computed的时候引入mapState mapGetters
【注意⚠️】
为什么要把mapState放在这里讲 是因为又个坑
一般而言 我们是直接 是不是很多人都这么做啊 嘻嘻嘻 也没错 前提是你不使用modules
我们发现 我们的dogUrl是undefined为什么呢 页面不渲染 打印的时候undefined
但是store里面确实有一个dog下面的dogUrl啊 不对 位置变了！！！！
我们打印一下store 发现了问题 因为我们使用了modules 所以 dogUrl 的位置发生了变化
应该是这样 this.$store.state.dog.dogUrl
而不是这样this.$store.state.dogUrl
所以我们采用第二种写法
好了 现在state也是可以直接使用的了
那么 你入门了吗？