VueX 详解

        Vuex 是一个状态管理工具，用于单个页面中不同组件（例如兄弟组件）的数据流通。它使用单一状态——用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 ”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。

        npm 安装 Vuex:

npm install vuex --save

        然后在项目的 src 文件目录下创建 store 文件夹，在 store 文件夹中创建一个 js 文件，例如：index.js 。 

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    //存放状态，也就是共享数据
  },
  mutations: {
    //存储修改对象状态的方法
  },
  getters:{
    //对数据加工返回，类似于 vue 实例中的计算属性 computed
  },
  actions: {
    //对数据进行异步操作的时候，在这里进行
  },
  modules: {
    //对 store 进行分模块管理
  }
})

export default store

        在 main.js 进行注册 使用方法类似于 vue-router ，这样所有的组件都可以使用 store 中的数据了。

// main.js 文件
import Vue from 'vue'
import App from './App.vue'
import store from './store'

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

VueX 状态详解：

        1、state

        用来存储所有组件的共用数据,单一状态树概念，VueX 中只用一个 state，方便管理。state 中所有已经初始化好的状态都是响应式的，当数据发生变化时，数据就会更新。

state: {
    count: 2,
    obj:{ 
        name: "马冬梅"
    }
},

        使用 $store.state.xxx 调用我们保存的数据，例如使用计算属性返回 store 中的数据：

export default {
  ...
  computed: {
    getCount () {
      return this.$store.state.count
    }
  },
  ...
}

        2、mutations 

        用来存储操作 state 中共享数据的方法。

mutations: {
  //mutations 的传参
  increase (state, num) {
    // 默认会将state对象传进来
    state.count += num
  },
  //添加新的响应式共享数据，例如:obj
  increaseObj (state) {
    Vue.set(state.obj, 'address', 'china')
  },
  //删除某个响应式共享数据
  deincreaseObj (state) {
    Vue.delete(state.obj, "address")
  }
}

        使用 $store.commit("方法名"，"参数") 调用 mutations 里面的方法，在组件中使用 mutations 中的方法示例：

export default {
  ...
  methods: {
    increaseFive : function() {
      this.$store.commit('increase', 5)
    }
  },
 ...   
}

        3、getters

        有时，我们会获取 stste 中状态的变化后的状态，此时我们就用到了 getters，类似于 vue 实例中的 computed 计算属性

getters: {
  //将 count 开平方
  compare (state) {
    return state.count * state.count
  },
  //我们也可以将 getters 作为第二个参数传进来，方便进行数据的多重处理
  calculate (state, getters) {
    return state.count + getters.compare
  }
}

        使用 $store.getters.xxx 调用 getters 中的方法，例如使用计算属性返回 getters 中的方法：

export default {
  ...
  computed: {
    getCompare () {
      return this.$store.getters.compare
    }
  },
  ...
}

        4、actions

        在某些情况下我们需要 Vuex 进行异步操作，比如发送网络请求，定时器等，我们就在actions 里面进行，actions 类似于 mutations，但是是用来替代 mutations 进行异步操作。

        我们的异步操作虽然是在 actions 中进行的，但仅限于获取数据，操作 state 中的数据，还是要在 mutations 中进行的。

actions: {
  //可传递参数
  delay(context){
    setTimeout(()=>{
      context.commit('increaseObj')   //increaseObj 为 mutations 中定义的修改数据的方法
    },2000)
  }
}

        使用 $store.dispatch() 调用 actions 中的方法：

export default {
  ...
  methods：{
    delay(){
      this.$store.dispatch('delay')    //用 dispatch 触发
    }
  },
 ...   
}

        5、modules

        当我们需要再将 state 中的数据进行模块化划分的时候使用，可以在 modules 中再定义一个 Vuex 的四种状态，Vuex 会将数据整合，最后还是放到 store 里，只是结构看起来更加清晰。

modules:{
  state:{
  },
  mutations:{
  },
  getters:{
  },
  actions:{
  }
}

        具体流程可看下图：