mutations vuex 调用_vuex 最详细学习笔记-CSDN博客

本文链接：https://blog.csdn.net/weixin_39902184/article/details/112226183

本文详细介绍了Vuex的状态管理模式，包括安装、store创建、核心概念（state、mutation、action、getter、module）的使用，以及数据持久化、严格模式等。强调了mutation的同步性、action的异步操作以及二者在状态变更中的角色。最后讨论了Vuex在何时使用、与全局对象的区别、action的返回值等问题。

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

Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

一、vuex 安装

npm install vuex --save

二、导入 vuex 包

import Vuex from 'vuex'Vue.use(Vuex)

三、创建store 对象

const store = new Vuex.Store({
          state:{ count:0 }})

四、将store对象挂载到vue实例中

new vue({
                el:'#app',            render:h=>h(app),            router,            // 将创建的共享数据对象，挂载到vue实例中            // 所有的组件，就可以直接从store中获取全局的数据了            store        })

五、vuex中的核心概念

1、state

state提供唯一的公共数据源，所有共享的数据都要统一放到store的state中进行存储。

// 创建store数据源，提供唯一公共数据    const store = new Vuex.Store({
            state:{ count:0 }    })    //  组件访问state中数据的第一种方式：    this.$store.state.全局数据名称    //  组件访问state中数据的第二种方式(通过辅助函数)：    // 1、从vuex中按需导入mapState函数    import {mapState} from 'vuex'    // 通过刚才导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性    // 2、将全局数据，映射为当前组件的计算属性    computed:{
            ...mapState(['count'])        // 或者        ...mapState({
                current: (state) => state.tab.currentMenu,        }),    }

2、Mutation

Mutation用于变更store中的数据

1)、只能通过mutation变更store数据，不可以直接操作store中的数据。

2)、通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。

// 定义Mutation    const store = new Vuex.Store({
            state:{
                count:0        },        mutations:{
                add(state){
                    // 变更状态                state.count++            }        }    })    // 触发mutation    methods:{
            handel(){
                // 触发 mutations 的第一种方式            this.$store.commit('add')        }    }

// 可以在触发 mutations 是传递参数    // 定义Mutation    const