vuex基础

vuex:

该插件是将多个组件间共享的状态进行集中管理(读/写)
如果一个项目不复杂，可以通过props等组件间通信的方法进行共享状态的操作
但是当项目很庞大或者分成不同模块由不同的人来写的时候，这个时候vuex会表现的非常优异

首先需要创建一个store,并暴露出这个store

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

//Vue需要使用这个插件,并在main的对象中添加暴露的对象
//就类似于使用router一样,先配置好,在main里面使用即可
Vue.use(Vuex)
//状态对象
const state = {
   
  count: 0
}
//包含更新状态方法的对象
const mutations = {
   
  //定义直接操作count的方法,按照要实现的效果可知道,count的操作只有+和-
  // *****这里面的参数state是默认为store暴露的对象里的state****
  ADD (state) {
   
    state.count++
  },
  UNADD (state) {
   
    state.count--
  }

}
// 包含间接更新状态方法的对象,直接调用的是更新状态的方法,而不在这里进行更新
const actions = {
   
  // 现在这里面定义的是不同情况调用哪种mutations里面的方法操作state
  increment ({
   commit}) {
   
    // 这里的参数{commit}是解构赋值,即将vuex中的commit方法传进来,这里就可以直接调用
    // 调用commit方法的结果就是操作mutations里面的方法
    // 注意无论是哪里,涉及到传方法名的时候,都是传的字符串
    commit('ADD')