Vuex中文官网

Vuex是做什么的？Vuex是一个专为Vue.js 应用程序开发的状态管理模式 。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。通俗易懂的讲Vuex是一个用来管理组件之间通信的插件，它解决了组件之间同一状态的共享问题，它能够更好地在组件外部管理状态。

一、Vuex一般用在什么地方？vuex使用场景

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。如果不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。如果要创建的够简单，最好不要使用 Vuex。一个简单的 store 模式就足够了。但是，如果需要构建一个中大型单页应用，很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

二、vuex怎么用？

1.下载vuex:

npm install vuex --save

2.在项目根目录下新建一个store文件夹，在文件夹内新建index.js,初始化Vuex:

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

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

export default store;

3.将store挂载到vue实例中，在main.js中添加：

import Vue from 'vue';
import store from './store/index'
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

4.在组件中使用vuex

（1）将state中定义的count拿来在h1标签中显示：

<template>
    <div id='app'>
        <h1>{{ $store.state.count}}</h1>
    </div>
</template>

（2）或者要在组件方法中使用：

 created() {
    console.log(this.$store.state.count)   // 打印出1000
  }

三、Vuex的核心概念

1、State：存储应用状态数据的对象，与vue中data类似

2、Getters：类似vue的计算属性，store中数据的变化，getters的数据也会发生变化

3、Mutations： 提交mutation来修改store中的状态，同步操作

4、Actions：与mutations类似，提交修改state的行为，处理异步任务（提交的是mutation，不是直接修改状态）

5、Modules： 模块化状态管理，为了开发大型项目，方便状态管理而使用的