状态管理中心—Vuex的用法(仓库)

最新推荐文章于 2024-05-21 11:31:23 发布

努力不熬夜的小喵

最新推荐文章于 2024-05-21 11:31:23 发布

阅读量129

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_43569680/article/details/117573067

版权

本文介绍了Vuex的状态管理机制，包括State、Mutations和Actions的使用，强调了只能通过提交Mutations来改变State。还探讨了如何在组件中通过computed属性和mapState辅助函数来访问Vuex状态，并解释了Actions的触发方式。此外，文章提到了Vuex的Getters和模块化（Modules）概念，展示了如何组织和使用模块化的Vuex store。

摘要由CSDN通过智能技术生成

状态管理中心—Vuex的用法(仓库)

为什么每次都要在mutation里改变数据？
因为只有这个我们才能在vue的开发工具Devtools里面观察到是那个组件改变了数据。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kY0LuD9m-1622811587186)(https://i.loli.net/2021/06/04/6xVtUdcmjz5bB8K.png)]

State（操作数据）
Mutations（同步操作改变数据）

Actions（异步/同步操作改变数据）

//stores.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
     
    state://存放一些变量
    {
     
      count:0,  
    },
    mutations://存放一些同步改变数据的操作（方法）
    //都会自动传入一个参数state，这个参数可以用于改变state中变量的值
    {
     
        add(state){
     
           state.count++; 
        },
        decrease(state){
     
           state.count--;
        } 	
    },
    actions://异步操作：这里传入的是context上下文
    //在mutations里定义一个方法以后通过commit进行触发
    {
     
        delayAdd(context){
     
            setTimeout(() => {
     
               context.commit('add'<