Vuex 是什么？

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

store中编写js文件

import {getAllData} from '@/api/api'
//存数据的地方,将此块渲染到页面上
const state = {
     stagesNum: {
        a: 0,
        b: 197,
        c: 0,
        d: 1,
        e: 5,
        }
    },
    //更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
    //Vuex 中的 mutation 非常类似于事件：
    //每个 mutation 都有一个字符串的 **事件类型 (type)**和一个**回调函数 (handler)** 
    //这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数
    //这个过程是同步的
 const mutations = {
       UPDATE_STAGES_NUM(myState, val) {
           myState.stagesNum = val
       }
    },
 //Action 通常是异步的，Action 提交的是 mutation，而不是直接变更状态。
 //Action 可以包含任意异步操作。
const actions = {
    async getAllData({ commit }) {
        const date = new Date()
        const res = await getAllData({
            year: date.getFullYear(),
        })
        commit('UPDATE_STAGES_NUM', res.phaseSum)
    }
  },
export default {
    // 开启命名空间，在文件中调用该模块时需要声明模块名
    namespaced: true,
    state,
    mutations,
    actions,
}

在 Vue 组件中获得 Vuex 状态

mapState 辅助函数

import { mapState } from 'vuex'
export default {
    data() {
        return {
            lists: [],
            forms: {},
        }
    },
    //store 中的状态是响应式的，在组件中调用 store 中的状态简单到仅需要在计算属性中返回
    //当其依赖的属性的值发生变化的时，计算属性会重新计算。反之则使用缓存中的属性值。
    computed: {
        ...mapState('home', ['stagesNum']),
    },
    //监听stagesNum的数据变化，变化调用方法
    watch: {
        stagesNum: {
            handler(value) {
                this.init()
            },
            deep: true,
        },
    },
    methods: {
        init() {
        //直接取出vuex里的数据
            this.forms = this.stagesNum
        },
        test(item) {
     //将页面携带参数传回给vuex去更新视图
   //通过disptch()方法触发actions，然后actions提交到mutations，最终实现state数据的更改 
   //涉及到接口值，提交给action
            this.$store.dispatch('home/getAllData', {
                phase: item,
            })
            //console.log('aaa')
        },
    },
}
</script>