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