一、VueX是什么

VueX 是一个专门为 Vue.js 应用设计的状态管理模式。

可变化状态可以理解为vue组件中data属性，是可以共享的data，利用vuex进行统一管理。

VueX作为唯一数据源，同步状态，共享状态。

 

 

二、为什么使用Vuex

由于组件之间是相互独立的，想要通信就得依靠props，但这只针对一组父子，当遇上多个组件（包括同胞）互相传值的情况，数据很容易出错，交互也比较复杂。

这时就需要Vuex来管理这个共享的数据。将该数据提取到“仓库”里，当组件需要用到的时候再从“仓库”中取出，灵活使用。

 

 

三、VueX的五个属性

1. state：vuex的基本数据，用来存储变量（状态）。

2. getters：对数据获取之前的再次编译，相当于state的计算属性，在组件中可以使用 $sotre.getters.fun()。

3. mutations：提交更新数据的方法，必须是同步的（如果需要异步使用action）。

　每个 mutation 都有一个字符串的事件类型 (type) 和 一个回调函数 (handler)。回调函数就是实际进行状态更改的地方，它会接受 state 作为第一个参数，提交载荷作为第二个参数。

setLoginType(state, data) {
    state.loginType = data;
}

　在组件中使用$store.commit('xxxx', params) 。

this.$store.commit('setLoginType', 'account');

4. actions：包含任何异步操作。提交的是 mutation，而不是直接变更状态。 在组件中使用$store.dispath('')。

5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters，使得结构非常清晰，方便管理。

 

 

四、Vuex的基础使用

1. 安装完成后，在根目录（src）下新建一个store文件夹，并在该文件夹内新增index.js

目录结构如下：

│  App.vue
│  main.js
│
├─assets
│      logo.png
│
├─components
│      HelloWorld.vue
│
├─router
│      index.js
│
└─store
       index.js

 

2. 初始化store中index.js的内容

import Vue from 'vue'
import Vuex from 'vuex'

//挂载Vuex
Vue.use(Vuex)

//创建VueX对象，全局状态管理
const store = new Vuex.Store({
  state:{
    //存放的键值对就是所要管理的状态
    name: 'hello'
  }
})

export default store

 

3. 将store挂载到当前项目的Vue实例中，打开main.js

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

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,  //store:store 和router一样，将我们创建的Vuex实例挂载到这个vue实例中
  render: h => h(App)
})

 

4. 此时就可以在组件中使用已经定义的状态对象

html：

{{ $store.state.name }}

js：

console.log(this.$store.state.name)

 

 

 

注：不可以直接改变state里的值！要通过提交 mutation 的方式！

 

 

参考资料：

https://vuex.vuejs.org/zh/guide/    官网

https://www.jianshu.com/p/2e5973fe1223