07-Vuex实现vue状态管理.pptx

Vuex详解郑少杰2024年3月1日Vuex是做什么的?官方解释：Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex也集成到Vue的官方调试工具?/vuejs/vue-devtoolsdevtoolsextension，提供了诸如零配置的time-travel调试、状态快照导入导出等高级调试功能。状态管理到底是什么？状态管理模式、集中式存储管理这些名词听起来就非常高大上，让人捉摸不透。其实，你可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。然后，将这个对象放在顶层的Vue实例中，让其他组件可以使用。那么，多个组件是不是就可以共享这个对象中的所有变量属性了呢？等等，如果是这样的话，为什么官方还要专门出一个插件Vuex呢？难道我们不能自己封装一个对象来管理吗？当然可以，只是我们要先想想VueJS带给我们最大的便利是什么呢？没错，就是响应式。如果你自己封装实现一个对象能不能保证它里面所有的属性做到响应式呢？当然也可以，只是自己封装可能稍微麻烦一些。不用怀疑，Vuex就是为了提供这样一个在多个组件间共享状态的插件，用它就可以了。管理什么状态呢?但是，有什么状态时需要我们在多个组件间共享的呢？如果你做过大型开放，你一定遇到过多个状态，在多个界面间的共享问题。比如用户的登录状态、用户名称、头像、地理位置信息等等。比如商品的收藏、购物车中的物品等等。这些状态信息，我们都可以放在统一的地方，对它进行保存和管理，而且它们还是响应式的（待会儿我们就可以看到代码了，莫着急）。OK，从理论上理解了状态管理之后，让我们从实际的代码再来看看状态管理。毕竟，Talkischeap,Showmethecode.(空口无凭，给我展示代码)我们先来看看但界面的状态管理吧.单界面的状态管理我们知道，要在单个组件中进行状态管理是一件非常简单的事情什么意思呢？我们来看下面的图片。这图片中的三种东西，怎么理解呢？State：不用多说，就是我们的状态。（你姑且可以当做就是data中的属性）View：视图层，可以针对State的变化，显示不同的信息。（这个好理解吧？）Actions：这里的Actions主要是用户的各种操作：点击、输入等等，会导致状态的改变。写点代码，加深理解：看下右边的代码效果,肯定会实现吧?单界面状态管理的实现在这个案例中，我们有木有状态需要管理呢？没错，就是个数counter。counter需要某种方式被记录下来，也就是我们的State。counter目前的值需要被显示在界面中，也就是我们的View部分。界面发生某些操作时（我们这里是用户的点击，也可以是用户的input），需要去更新状态，也就是我们的Actions这不就是上面的流程图了吗？多界面状态管理Vue已经帮我们做好了单个界面的状态管理，但是如果是多个界面呢？多个试图都依赖同一个状态（一个状态改了，多个界面需要进行更新）不同界面的Actions都想修改同一个状态（Home.vue需要修改，Profile.vue也需要修改这个状态）也就是说对于某些状态(状态1/状态2/状态3)来说只属于我们某一个试图，但是也有一些状态(状态a/状态b/状态c)属于多个试图共同想要维护的状态1/状态2/状态3你放在自己的房间中，你自己管理自己用，没问题。但是状态a/状态b/状态c我们希望交给一个大管家来统一帮助我们管理！！！没错，Vuex就是为我们提供这个大管家的工具。全局单例模式（大管家）我们现在要做的就是将共享的状态抽取出来，交给我们的大管家，统一进行管理。之后，你们每个试图，按照我规定好的规定，进行访问和修改等操作。这就是Vuex背后的基本思想。Vuex状态管理图例一起在来看一副官方给出的图片简单的案例我们还是实现一下之前简单的案例首先，我们需要在某个地方存放我们的Vuex代码：这里，我们先创建一个文件夹store，并且在其中创建一个index.js文件在index.js文件中写入如下代码：挂载到Vue实例中其次，我们让所有的Vue组件都可以使用这个store对象来到main.js文件，导入store对象，并且放在newVue中这样，在其他Vue组件中，我们就可以通过this.$store的方式，获取到这个store对象了使用Vuex的count好的，这就是使用Vuex最简单的方式了。我们来对使用步骤，做一个简单的小节：1.提取出一个公共的store对象，用于保存在多个组件中共享的状态2.将store对象放置在newVue对象中，这样可以保证在所有的组件中都可以使用到3.在其他组件中使用store对象中保存的状态即可通过this.$store.s