Vuex（vue2中的状态机）

目录

Vuex

  state属性

  getters属性

  mutations属性

  actions属性

  modules属性

辅助函数

---

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'])
            }