三十七、Vuex

一、Vuex是一个专门为Vue.js应用程序开发的状态管理模式

• 它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
• Vuex 也集成到Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
• 状态管理：可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面；然后将对象放在顶层的vue实例中，让其他组件可以使用。（Vuex就是为了提供一个在多个组件间共享状态的插件）

二、Vuex状态管理图例

三、实例

App.vue文件

<template>
  <div id="app">
    <h5>----------App内容----------</h5>
    <h2>{{message}}</h2>
    <h2>{{$store.state.counter}}</h2>
    <button @click="add">+</button>
    <button @click="sub">-</button>

    <h5>----------HelloVuex内容----------</h5>
    <!-- <hello-vuex :counter="counter"></hello-vuex> -->
    <hello-vuex/>
  </div>
</template>

<script>
import HelloVuex from './components/HelloVuex.vue'

export default {
  name: 'App',
  data() {
    return {
      message: "我是App组件",
    }
  },
  components: {
    HelloVuex
  },
  methods: {
    add(){
      this.$store.commit('increment')
    },
    sub(){
      this.$store.commit('deincrement')
    }
  }
}
</script>

HelloVuex.vue文件

<template>
  <div>
    <h2>{{$store.state.counter}}</h2>
  </div>
</template>

<script>
export default {
  name: 'HelloVuex',
}
</script>

<style>

</style>

store中的index.js文件，用于配置Vuex的相关信息　

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

//1.安装插件
Vue.use(Vuex)

//2.创建对象
const store = new Vuex.Store({
  state:{
    counter: 1000
  },
  mutations:{
    //方法
    increment(state){
      state.counter++
    },
    deincrement(state){
      state.counter--
    }
  },
  actions:{

  },
  getters:{

  },
  modules:{

  }
})

//3.导出store对象
export default store

四、Vuex核心概念　　

• State  保存共享状态的位置
• Getters 类似于组件中的计算属性
• Mutation  修改状态信息
• Action  做异步操作，之后再通过Mutation修改状态信息
• Module  划分模块，针对于不同模块进行数据的保存