Vuex公共数据管理工具使用_工具类使用vuex-优快云博客

本文链接：https://blog.youkuaiyun.com/webDevelopSnail/article/details/109567066

本文介绍Vuex作为Vue.js应用程序的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。文章详细阐述了Vuex的组成部分，包括State、Mutations、Actions和Getters等。

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

一、介绍

介绍：Vuex公共数据管理工具，将共享的数据保存到vuex中，方便整个程序中任何组件都可以获取和修改vuex中保存的公共数据；

二、使用目的

a.大型项目中：如想要在子组件中使用祖先组件中数据，要么必须一层一层的传递
b.兄弟组件之间直接传递数据，如果兄弟组件之间想要传递数据，就必须借助父组件（使用麻烦）

三、state用于保存修改共享数据的方法

a.导入vue及vuex 
b.创建vuex的对象state\mutation\action\getter  
c.在祖先组件中添加store的key保存Vuex对象
  例如store:store(只要祖先组件中保存了Vuex对象，要么祖先组件和所有的后代组件中就可以使用Vuex中保存的共享数据了)
d.在后代组件中使用的时候，直接通过this.$store.state.msg就可以了

注意点：在vuex中不推荐直接修改共享数据，如果多个组件都修改了共享的数据，那后期数据发生了错误，我们需要调试错误，就需要把每一个修改了共享数据的组件都检查一遍，这样非常低效，非常不利于我们去维护.

四、mutations用户保存修改数据的方法

统一管理公共的方法，需要的触发调用，而不是各自有各自方法不好维护。

在执行mutation中定义方法时候，系统自动给这些方法传递一个state参数，state中就保存了共享的数据
使用方法：
a.在mutation中定义方法：如mAdd(state){  state.count =state.count+1}  或mSub（state）{state.count = state.count - 1}
b.在需要用到的组件方法中直接触发，如methods:{add(){this.$store.commit(“mAdd”)},  sub(){this.$store.commit(“mSub”)}}

五、vue中getters属性（缓存数据）

专门用于定义计算属性的相当于computed（属性：将计算缓存，只要不发送变化就不会调用）

使用方法：a.在getters中定义一个方法formart(state){return state.msg + 'www'}
          b.使用方法同computed中差不多（原来是{{formate}}）,现在是{{this.$store.msg}}