Vuex初学笔记

Vuex官方解释是专为Vue.js应用程序开发的状态管理模式

 

为什么要用Vuex状态管理呢？

1.如果你做过大型开放，你一定遇到过多个状态，在多个界面间的共享问题

2.比如用户的登录状态、用户名称、头像、位置等等

3.比如商品的收藏、购物车中的商品

4.这些状态信息，我们都可以放在统一的地方，对它进行保存和管理，而且它们还是响应式的

 

 单页面的状态管理

 

  State就是我们的状态。(姑且可以认为data中的属性)

View视图层，可以针对State的变化，显示不同的信息

Actions主要是用户的各种操作：点击、输入等，会导致状态的改变

多界面状态管理

多个视图依赖同一个状态（一个状态改了，多个界面需要进行更新）

不同界面的Actions都想修改同一个状态（Home.vue需要修改，Profile.vue也需要修改）

 全局单例模式（大管家）

我们需要把共享的状态抽取出来，交给我们的大管家，统一进行管理，之后每个视图按照我规定好的规定，进行访问和修改等操作

 

 这是Vue官方给出的图，Devtools是Vue在浏览器上的插件，可以记录每次状态更改的操作是谁，状态修改的结果等。

列：新建一个store文件夹，在文件夹下新建index.js，代码如下

state中存放一个count数据（可以当作一个公共状态）

mutations中写俩个方法用于更改状态。把store对象导出

在main.js中

导入store，并在Vue实例中存放store，这样其他的Vue组件就可以通过this.$store来获取这个对象

App.vue文件下

this.$store.state属性方法获取状态

俩个button按钮的单击方法 调用this.$store.commit(mutations中的方法)

小结：1.提取出一个公共的store对象，用于保存在多个组件中共享的状态
2.将store对象放置在new Vue对象中，这样可以保证在所有的组件中都可以使用到
3.在其他组件中使用store对象中保存的状态即可
通过this.$store.state.属性的方式来访问状态
通过this.$store.commit('mutation中方法')来修改状态