Vuex（自定义简易Vuex、states、mutations、getters、actions、modules、mapState等、namespace搭配devtools调试、数据持久化）

原创

已于 2023-01-21 17:12:14 修改 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#Vuex使用方式详解 #Vuex异步请求修改数据图解 #mapState方法 #mapMutations方法 #Vuex中模块化

于 2021-06-08 23:40:14 首次发布

Vuex 是 Vue.js 应用的状态管理模式，它集中管理应用的公共数据，解决组件间数据传递的问题。Vuex 包括 state、mutations、getters、actions 和 modules 等核心概念。state 存储共享数据，mutations 定义修改数据的函数，getters 提供计算属性，actions 处理异步操作。此外，还提供 mapState、mapMutations、mapGetters 和 mapActions 等辅助函数简化数据映射。启用 strict 模式可防止直接修改 state，而 namespaced 用于模块命名空间。配合 Vue DevTools，可以方便地跟踪和调试状态变化。使用 vuex-persistedstate 插件可实现数据持久化。

Vuex(store)

Vuex是vue配套的公共数据管理工具，可以将共享的数据保存在Vuex中，方便整个程序中的任何组件都可以获取和修改vuex中保存的公共数据。可用于解决子组件中使用祖先组件中的数据需要一层一层传递和兄弟组件中数据传递需要借助父组件问题。注意需要在Vue导入之后导入。

Vuex引入链接

new Vuex.Store({})

const vx=new Vuex.Store({state:{datum1:value1},mutations:{mfun(s,param){}},getters:{gfun(s,param){return }},actions:{afun(s,param){}},modules:{moduA:modua}})，新建Vuex对象，然后通过new Vue（{el:'#app',data:{},store:vx})，将其绑定在Vue实例上便可以使用。

state

state就相当于组件中的data，就是专门用于保存共享数据的。要想使用该数据需要在Vue中添加store属性指向vx（组件中使用则只需在父组件中添加一次，其子孙组件都可以使用）例如new Vue（{el:'#app',data:{},store:vx})，使用方法为this.$store.state.datum1，注意在Vue开发中引入某些第三方库的时候，一些标签中会将this指向null，此时通过$store.state.datum1直接访问。

mutations

作用：相当于组件中的methods，虽然在Vue中可以通过this.$store.state.datum1来改变Vuex中的公共数据，但是在查找数据错误的时候，无法得知数据在哪个函数中改变的，于是规定，改变公共数据可以通过mutation中的方法改变，这样便好纠错了。

使用方法：const vx=new Vuex.Store({state:{datum1:value1}，mutations:{mfun(s,param){}}})，定义在mutations属性指向的对象中的方法（mfun），系统会给其第一个参数传递state，例中我们用s接收了，在函数体可以直接通过s.datum1拿到公共数据value1（s相当于this.$store.state），Vue中调用该方法时通过this.$store.commit('mfun',param)，其中param和mfun中接收的参数对应，一样无法在元素的属性中访问，即不能v-on指令直接绑定，需要写在Vue的methods中的方法上。调用方法还有对象写法：this.$store.commit({type:'mfun',param1:value1,...paramn:valuen})，其中type代表mutations中的函数，此时mutations中mfun接收参数需要改变，将param1,...,paramn合为一个param即可，通过param.param1可以拿到调用时的传入参数value1。

getters

同Vue中的计算属性相似，不同在于会给其函数默认传递一个参数state，例如const vx=new Vuex.Store({state:{datum1:value1},getters:{gfun(s,param){return }}})，在gfun中可以通过s.datum1来访问数据value1，调用时需要通过{ {this.$store.getters.gfun}}，返回的结果没有发生变化，也会执行一次（写多个{ { this.$store.getters.gfun}}，实际上只会运行一次this.$store.getters.gfun函数，其它多次都会返回第一次的值）。