Vuex如何实现数据共享？

概念：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

官方图示：

设计理念：集中式管理、状态可预测，简化组件管理状态的过程。

State：状态、数据。

Mutations：改变状态的函数。

Actions：异步请求、和后台交互。

Store：包含以上三个的容器。

Commit：改变数据的状态。

Devtools：拦截用户提交数据的变更、监管数据。

Mutate：提交改变状态

Render：执行得到新的虚拟DOM

DisPath：对比两个虚拟DOM 完成数据的更新。

使用：

1.下载

VUEX  npm i vuex@3.6.2

2.模块化  + 命名空间

JS 进行拆分 将对应组件的 方法 与 数据 独立出来

公开 JS  并 开启命名空间( namespaced: true)

export default  {
    namespaced: true,
}

3. actions里面使用context.commit（'传递的方法名'，value） 第一个参数是mutations里面的方法参数 将value传递到mutations里面的方法

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

Vue.use(Vuex);
const actions={
    addOdd(context,value){
        console.log(("进入了actions的addOdd,value:" + value));
        context.commit('ADDODD',value);
    },addWait(context,value){
        console.log(("进入了actions的addWait,value:" + value));
        context.commit("ADDWAIT",value);//将value传给mutations的ADDWAIT方法
    }
}
const mutations = {
    JIA(state,value){
        console.log(("j进入了mutations的JIA,value:" + value));
        state.sum+=value;
    },JIAN(state,value){
        console.log(("j进入了mutations的JIAN,value:" + value));
        state.sum-=value;
    },
    ADDODD(state,value){
        console.log('进入了mutations的 ADDODD，value：' + value);
        if (state.sum%2){
            state.sum+=value
        }
    },ADDWAIT(state,value){
        console.log('进入了mutations的 ADDWAIT，value：' + value);
        window.setTimeout(()=>{
            state.sum+=value;
        },1000)
    }


}
//准备state对象 用于保存具体的数据
const state={sum:0,schoolName:'猿究院'}
//准备getters用于将state中的数据进行再次加工
const getters={
    bigSum(){
        return state.sum*10;
    }
}

4.暴露并创建VUEX

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

5.使用

import {mapState, mapGetters, mapActions, mapMutations} from 'vuex'

, methods: {
    ...mapMutations('自定义名称',{
    }),
    ...mapActions('自定义名称',{
    })

        将值传到actions
    this.$store.dispatch('自定义名称/actions',this.name) 

将值传到mutations
    this.$store.commit('自定义名称/mutations',this.name)
  }, computed: {
       // 通过mapState 将sum等 为计算属性
       this.$store.state.自定义名称.sum

定义数据

    ...mapState('自定义名称',['sum', 'schoolName']),
    ...mapGetters('自定义名称',['bigSum']),
    ...mapState('自定义名称',['personList'])
  }

<template>
  <div>
<!--    直接写参数名-->
    <h2>当前求和结果为:{{ sum }}</h2>
    <h2>当前的求和内容放大10倍：{{bigSum}}</h2>
    <h2>{{ schoolName }}</h2>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
<!--    函数必须传参-->
    <button @click="increment(n)">
      +
    </button>

    <button @click="decrement(n)">
      -
    </button>
    <button @click="incrementOdd(n)">
      求和为奇数在加
    </button>
    <button @click="incrementWait(n)">
      延迟在加
    </button>
  </div>
</template>

<script>
import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'
export default {
  name: "MyCount",
  data(){
    return {
n:1
    }
  },methods:{
   ...mapMutations({increment:'JIA', decrement:'JIAN'}
      ),
    // mapActions要写actions里面的方法
    ...mapActions({incrementOdd:'addOdd',incrementWait:'addWait'})


  },computed:{
    ...mapState(['sum','schoolName']),...mapGetters(['bigSum'])
  }
}
</script>

<style scoped>

</style>