容桂新网站建设,专业的企业小程序开发公司,购物网站建设资讯,个人网站风格目录
Vuex state属性 getters属性 mutations属性 actions属性 modules属性
辅助函数 Vuex 状态管理模式 维护公共状态 公共数据 使用状态机模块维护状态 A组件中分发工作#xff08;发起异步请求)---获取数据---提交突变(将数据提交给突变 ) 通过突变修改状态…目录
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中tokenlogin(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])}
