Vuex的知识和项目实战笔记

Vuex的知识和项目实战笔记

一.介绍一下vuex
vuex是为vue.js 开发的状态管理模式，在兄弟组件，甚至没有关系的组件之间来做数据存储和共享，把数据存储到vuex里，在各个组件都可以共用

这个流程图是精髓：
Vue Components 组件里面的一个按钮点击事件，通过dispatch派发一个Actions，Actions会提交一个commit到Mutations，Mutations会自动提交状态到State里面去，从而State会重新渲染Vue Components（视图）

注意所有的异步操作只能在Actions上进行，不能在Mutations上

注意：当状态改变之后呢，与组件之间有延迟，这时要用Computed计算属性，当数据延迟，获取状态没有用的，因为获取到状态时，页面已经渲染完了，这时再获取状态就有点晚了。

二.初始化封装vuex，安装官方文档的格式（由于项目不是太大，本项目不考虑modules）

1. 创建store文件夹
2. 分别建立index.js，action.js ，mutations.js
3. index.js：用于管理入口，也包括状态的入口
   

vuex挂在到vue实例上，于是import引入vue，和vuex，并且用use连接。

并导入我们的mutations.js和action.js。

用export default 引用vue.store对象，写法是固定的，并在这个对象里面，引入state，actions，mutations这三个对象

创建一个const state 来初始化并管理我们的状态

4. mutations.js 和 action.js：
   
   
   这个 mutations中的export default {} 相当于 index.js的 vue.store中的mutations后面添加：{},跟在index.js中直接写mutations：{}效果是一样的，action.js同理，两个文件的具体内容在下一部分。

5. 在main.js中引入 store文件夹中的index.js入口文件
   
   

6. 调试，看封装是否成功，利用vue-devtools工具
   

三.实战：

1》在登录页面用进行数据存储，保存我们的用户名，并通过dispatch给action.js，进行数据传输

2》action.js接收到数据后，会提交一个commit到mutations

3》mutations.js接收到数据后，自动提交到state里面去，刷新状态

4》在NavHeader.vue中，读取数据


5》成功登陆之后：

6》但此时刷新之后，数据会丢失，我们如何解决

我们需要重新获取user接口的数据，进行存储，在上一篇文章也提过此事，在App.vue中


发现状态里面的username已经改变了，但是视图没有展示出来，这个问题也在上个文章提过一嘴，因为先加载app.vue再加载NavHeader.vue组件，
navheader下图的这个数据渲染是不太需要时间的

而app组件下图的调用接口是需要时间的

存在延迟问题
我们此时利用一下计算属性，computed，重新计算一下username

这样就解决了这个问题

7》同理完成cartcount

8》利用mapState 和mapActions 辅助函数

①mapActions：
在login.vue中



②.mapState:
在Navheader.vue中：