感谢​​Vuex的介绍和使用_李公子丶的博客-_vue vuex使用​​

1.概念
​ 在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

2.何时使用？
​ 多个组件需要共享数据时

3.搭建vuex环境
创建文件：src/store/index.js
 

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
 
 
export default new Vuex.Store({
    //准备state对象——保存具体的数据
    state:{
 
    },
    //准备mutations对象——修改state中的数据
    mutations:{
 
    },
    //准备actions对象——响应组件中用户的动作
    actions:{
 
    }
})

2.在​​main.js​​​中创建vm时传入​​store​​配置项

......
//引入store
import store from './store'
......
 
//创建vm
new Vue({
  el:'#app',
  render: h => h(App),
  store
})

4.基本使用

  1. 初始化数据、配置​​actions​​、配置​​mutations​​，操作文件​​store.js​​
import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
export default new Vuex.Store({
    state:{
        sum: 1
    },
    mutations:{
        add(state,value) {
            state.sum += value
        }
    },
    actions:{
        awaitAdd(context,value) {
            setTimeout(
                function () {
                    context.commit('add',value)
                }, 3000
            )
        }
    }
})

2.组件中读取vuex中的数据：​​$store.state.sum​​

<template>
  <div>
    <h1>当前值为: {{$store.state.sum}}</h1>
  </div>
</template>

3.组件中修改vuex中的数据：​​$store.dispatch('action中的方法名'数,据)​​​ 或 ​​$store.commit('mutations中的方法名',数据)​​

<template>
  <div>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add()">点击+</button>
    <button @click="awaitAdd()">延迟点击+</button>
 
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      n: 1
    }
  },
  methods: {
    add () {
      this.$store.commit('add', this.n)
    },
    awaitAdd() {
      this.$store.dispatch('awaitAdd', this.n)
    }
  },
  
}
</script>
 
<style>
 
</style>

备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写​​dispatch​​​，直接编写​​commit​​

5.getters的使用

1. 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。

2. 在```store.js```中追加```getters```配置

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
export default new Vuex.Store({
    state:{
        sum: 1
    },
    mutations:{
        add(state,value) {
            state.sum += value
        }
    },
    actions:{
        awaitAdd(context,value) {
            setTimeout(
                function () {
                    context.commit('add',value)
                }, 3000
            )
        }
    },
    getters: {
        bigSum(state) {
            return state.sum * 10
        }
    }
})

 3. 组件中读取数据：$store.getters.bigSum

<template>
  <div>
    <h1>当前值为: {{$store.state.sum}}</h1>
    <h2>数值放大{{$store.getters.bigSum}}</h2>
    <List/>
  </div>
</template>