Vuex（vue2中的状态机）_vue2组件中使用状态机-CSDN博客

本文链接：https://blog.csdn.net/l12345666777/article/details/135279098

Vuex

状态管理模式维护公共状态公共数据
使用状态机模块维护状态
A组件中分发工作（发起异步请求)--->获取数据--->提交突变(将数据提交给突变 )
通过突变修改状态其他页面就可以渲染数据

state属性

维护状态类似于data 存储数据

            // 类似于data 存储公共状态 存储数据
            state: {
                public: 'hello vuex',
                token: ""
            },

getters属性

对state中的数据进行处理后再返回类似于计算属性

            // 类似于计算属性 对state中数据进行处理然后再返回
            getters: {
                Upper(state) {
                    return state.public.toUpperCase()
                }
            },

mutations属性

突变同步操作唯一修改state方式

            // 突变 同步操作 修改state中数据的唯一一种方式
            mutations: {
                SET_TOKEN(state, payload) {
                    // state是vuex默认提供的  payload载荷 提交突变传参 payload接收突变传递参数
                    state.token = payload
                }
            },

actions属性

动作异步操作一般用于获取后端数据

            // 动作 异步操作
            actions: {
                // 登录获取token   提交突变 把token传给突变    突变--->设置给state中token
                login(sto, payload) {
                    // sto类仓库对象   默认提供  commit提交突变  dispatch
                    // 假设发送完成异步请求
                    let token = 'dasdasdasfasdasdasdasdadaadssdasda';//token就是后端获取到的数据token
                    // 将token提交给突变
                    sto.commit('SET_TOKEN',token)
                    console.log(sto, payload);
                }
            }

modules属性

模块化分模块进行维护状态

  modules: {
    login,
    user
  }

辅助函数

组件内使用vuex中核心概念：state getters actions mutations
$store.state.模块名字(login).token
辅助函数 mapState('login',['token','msg']); {{token}}
辅助函数 mapGetters('login',['Upper'])
mapState mapGetters 声明在计算属性中

            methods: {
                ...mapActions(['login']),
                ...mapMutations(['SET_TOKEN']),
                // 相当于login(){}
            },

辅助函数 mapMutations('login',['SET_TOKEN'])
辅助函数 mapActions('login',['login'])
mapMutations mapActions 声明在methods中
异步动作 $store.dispatch('login/login')

            computed:{
                // 引入辅助函数所对应的状态/数据  mapState('命名空间',['','',''])
                ...mapState(['public','token']),
                ...mapGetters(['Upper'])
            }