Vuex

Vuex 是什么？

vuex 是一个专门为vue.js应用程序开发的状态管理模式。采用集中式存储管理应用的所有组件的状态。（可以理解为在data中的属性，需要共享给其他组件使用的部分，也就是说，是我们需要共享的data，使用vuex进行统一集中式的管理。）

为什么要用 vuex ？

组件通信的类型

• 父子通信
• 跨级通信
• 兄弟通信
• 路由视图级别通信

什么是“状态管理模式”？

这个状态自管理应用包含以下几个部分：

• state，驱动应用的数据源；
• view，使用状态数据源的视图
• actions，使用状态数据源的视图

new Vue({
   
  // state
  data () {
   
    return {
   
      count: 0
    }
  },
  // view
  template: `
    <div>{
   {
    count }}</div>
  `,
  // actions
  methods: {
   
    increment () {
   
      this.count++
    }
  }
})

这种模式遵循的是 单向数据流 模式

核心概念

• state：存储状态（变量）
• getters：加工state成员给外界，在组件中使用 $sotre.getters.fun()
• mutations：修改状态，并且是同步的。在组件中使用$store.commit(’’,params)。这个和组件中的自定义事件类似。
• actions：异步操作。在组件中使用是$store.dispath(’’)
• modules：store的子模块，模块化状态管理

Vue组件如果调用某个VueX的方法过程中需要向后端请求时或者说出现异步操作时，需要dispatch VueX中actions的方法，以保证数据的同步。action的存在就是为了让mutations中的方法能在异步操作中起作用。

state

state 的创建

存储应用状态数据的对象，state 的值可以是一个对象，也可以是一个返回对象的函数，类似 vue 中组件的 data ，使用函数的方式返回对象可以避免对象引用导致的副作用问题

// let state = {
   
//   a: 1
// }
let state = _=>({
   a:1})

const store = new Vuex.Store({
   
  	state
})
const store2 = new Vuex.Store({
   
    state
})

console.log(store