vuex的使用_vuex 追踪功能-优快云博客

本文介绍了Vuex在应用中的应用场景，包括父子组件间的数据共享、无关系组件间的公共数据管理。详细讲解了action、mutation和state的执行顺序，以及devtools的使用。还展示了如何设置store、创建state、mutations和getters，并在组件中调用这些功能。最后，强调了state修改的规则和异步操作的处理方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

应用场景：

基于父子，组件兄弟组件我们传值会很方便，但是没有关系的组件之间要使用同一组数据就可以用vuex，他提供了一个公共仓库，保存着所有组件都能公用的数据。

vuex里面包含action，mutation，state步骤

执行顺序是

devtools：vue发开的浏览器插件，可以帮助记录跟踪每次修改的state的状态的，知道究竟是哪一步骤改动了state，方便跟踪错误，

state一定是通过mutation来修改的，只有这样dextools才能跟踪。

可以通过 vueComponents直接修改mutation，但是如果有异步操作可以采用action，因为mutation是同步操作，devtools跟踪不到异步操作，action是处理异步操作的，所以一般使用后端请求，Backend API（后端请求API）

store文件下新建js文件：

            //1.先下载，引入
            import Vuex form 'vuex'  
            // 2.创建对象
            const store = new Vuex.store({
                state:{
                    counter:1000
                },
                mutations:{
                    //定义方法，
                    increment(state){//直接写state就能直接获取，不需要再this
                        state.counter++
                    }
                }
            })

main.js文件中引入，挂载到Vue实例中：

            import Vuex from 'vue'
            import App from './App'
            import store form './store'
            new Vue({
                el:'#app',
                store,
                render:h =>h(App)
            })

组件中使用：

按钮绑定需要的方法，例如

add(){

this.$store.commit('increment') //括号里面就是store.js文件里面执行的方法

}

state单一状态数：

应用场景：所有需要存储的信息只存一个store中，

Getters基本使用：

相当于计算属性，

            const store = new Vuex.store({
                state:{
                    counter:1000
                },
                mutations:{
                    //定义方法，
                    increment(state){//直接写state就能直接获取，不需要再this
                        state.counter++
                    }
                },
                action:{},
                getters:{
                    powerCounter(state){
                        return state.counter * state.counter
                    }
                }

            })

子组件里面使用时候直接引用