本文共 1334 字，大约阅读时间需要 4 分钟。

vuex解决了组件之间同一状态的共享问题。当我们的应用遇到多个组件共享状态时，会需要：

多个组件依赖于同一状态。传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。这需要你去学习下，vue编码中多个组件之间的通讯的做法。

以上的这些模式非常脆弱，通常会导致无法维护的代码。来自官网的一句话：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

它采用集中式存储管理应用的所有组件的状态。这里的关键在于集中式存储管理。这意味着本来需要共享状态的更新是需要组件之间通讯的，而现在有了vuex，就组件就都和store通讯了。问题就自然解决了。

这就是为什么官网再次会提到Vuex构建大型应用的价值。如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。

1. vuex的使用：

   1、src目录下面新建一个vuex的文件夹

   2、vuex 文件夹里面新建一个store.js

   3、安装vuex

   cnpm install vuex --save

   4、在刚才创建的store.js引入vue 引入vuex 并且use vuex

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

   5、定义数据

   /*1.state在vuex中用于存储数据*/    var state={        count:1    }

   6、定义方法 mutations里面放的是方法，方法主要用于改变state里面的数据

   var mutations={    incCount(){    ++state.count;    }}

   暴露

   const store = new Vuex.Store({    state,    mutations})export default store;

2. 组建里面使用vuex：

   1、引入 store     import store from '../vuex/store.js';2、注册     export default{        data(){            return {                              msg:'我是一个home组件',            value1: null,            }        },        store,        methods:{            incCount(){            this.$store.commit('incCount');   /*触发 state里面的数据*/            }        }        }3、获取state里面的数据      this.$store.state.数据4、触发 mutations 改变 state里面的数据    this.$store.commit('incCount');

转载地址：https://blog.csdn.net/weixin_38676040/article/details/82662684 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！