「vue 组件通信二」vuex状态管理

前面一篇章介绍了组件的基本的通信，但是对于负责的项目来说还是略显单薄，所以今天再来介绍vue通信的另外一个重要角色 --- vuex
vuex 的存在主要是来解决非父子组件，兄弟组件所存在的缺陷。vuex主要的内容分为，state, mutations,actions, getters, modules

import Vue from 'vue';
import Vuex from 'vuex';
import mutations from './mutations'
import actions from './actions'
import getters from './getters'

Vue.use(Vuex);  //需要在这里注册然后才可以使用
const state = {
  count: 0,
  message: 'this is vuex'
}

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

state

这个属性主要的作用就是用来存储vuex管理的实例

const state = {
  count: 0,
  message: 'this is vuex'
}

mutaitions

要知道状态管理的属性（state)只能用来读取，而不能进行进修修改，只能通过mutatiosns来对它进行操作
mutaitions 就是对状态管理的属性进行一些修改操作（变更状态）

• 官方不建议把异步放这里 ( 如果异步操作了数据，组件在commit后，数据不能立即更新，而且不知道什么时候更新）

const mutations = {
  increment (state) {
    state.count++;
  }
}

export default mutations;

在vue中使用它

template:
      {{count}}
      <button @click = "increment"> 点我 +</button>

 computed: {
    count: function () {
      return this.$store.state.count
    }
  },
  methods: {
    increment () {
      this.$store.commit('increment') // 通过this.$store.commit方法来执行mutations
    }
  }

actions

actions和mutations很相似，不同在于action中可以提交mutations;
actions函数接收一个与store实例具有相同方法和属性的context对象； 因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

• 官方建议把异步放在这里进行处理 （个人感觉并没有特别的地方😆）

const actions = {
  incrementAction (context) {
    context.commit('increment');
  },

  asyncIncrement (context) {
    return new Promise(resolve => {
      setTimeout(() => {
        context.commit('increment');
        resolve();
      }, 1000);
    })
  }
}

export default actions;

如何去使用这个东西呢？

 incrementAction () {
      this.$store.dispatch('incrementAction')
    },
    asyncIncrementAction () {
      this.$store.dispatch('asyncIncrement').then(() => {
        console.log(this.$store.state.count);
      })
    }

getter

getters 和 vue 中的 computed 类似 , 都是用来计算 state 然后生成新的数据 ( 状态 ) 的。

export default {
 count (state, getters) { // 参数说明： arg1: state实例  arg2: 也可以是getters自身
   return state.count > 5 ? '傻瓜' : '很棒哦'
 }
}

countGetter: function () {
      return this.$store.getters.count
    }

modules

这个其实项目用得相对比较少，它是用来把store分割到不同的模块。但项目大的时候当个的store可能并不能满足业务需求，就有可能造成store过于庞大，所以就需要进行拆分，而modules正好可以派上用场。

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> `moduleA`'s state
store.state.b // -> `moduleB`'s state

• 最后
  对于vuex之前一直存在一个疑问，就是刷新之后的数据就不存在了，当然有解决办法
  就是配置本地存储一起使用eg: locationStorage/sessionStorage，但是本地存储了之后，为什么还要
  绕到vuex中去写？这根本就没必要啊，反而复杂了
  结论：
  vuex的作用，vuex主要用在父子组件通信或者子子组件间通信，如果不用vuex通信就得通过复杂的事件触发完成。
  只是用于这些组件通信使用。
  vuex 主要是负责通信的，而不是全局存储