Vue.js 3开发基础与实战课件 第九章 Vue状态管理.pptVIP

Vuex的安装和使用3．Vuex的基本使用之前提到了，在Vuex中，所有的状态都被存储在中央存储库（store）中。组件可以通过获取store对象来获取存储的状态。通过mutations，可以对状态进行变化，而使用actions则可以执行一些异步操作。如果想要像在data函数中一样对状态进行计算，可以定义getter。下面还是以计数器为例，来看一下Vuex的实现方式。步骤如下：首先，在src下创建一个store.js文件。Vuex的安装和使用上述代码中，使用Vuex提供的createStore函数创建了一个中央存储库（store）实例。在store实例中，使用state来定义需要共享的状态，并使用mutations来定义修改状态的方法。在Vuex中，我们只能通过调用mutations或actions中定义的方法来改变共享状态，外部无法直接修改状态，这样可以更明确地追踪状态的变化。最后，通过exportdefault将store实例导出，以便外部可以访问它。在main.js文件中导入store实例并将其添加到Vue中。Vuex的安装和使用在components目录下创建Counter2.vue和Counter3.vue组件，并且让Counter.vue组件从store中获取和修改count状态。在上述代码中，在组件中使用this.$store