vuex

使用方法

在store.js里写store的配置
state:定义状态的值,相当于定义变量
getters:相当于计算属性
mutation:vuex提供修改状态值的方法,只能是提交mutations
action:接受一个参数,是一个与store实例具有相同方法和属性的context对象

state:{
        'text':'天马流星拳'
    },
getters:{
      personInfo(state){
          return state.name+"的绝招是"+state.text;
      }
    },
mutations: {
    changeName(state,preload){//接受两个参数,一个是state,第二个是载荷(這个值是可以通过提交mutations时传入)
        state.name = preload.name;
        state.text = preload.text;
    }
},
actions: {
      actionName(context){//接受一个参数,是一个与store实例具有相同方法和属性的context对象
          //這里的context相当于this.$store
          console.log(context)
      }
  }

改变state的值

通过this.$store.commit()提交mutation,第一个参数为mutation的名字,第二个参数为提交的载荷
dispatch:含有异步操作,例如向后台提交数据

this.$store.commit("changeName",{name:"子园二号",text:"庐山升龙霸"});
this.$store.dispatch("actionName")

在HTML中渲染state中的值

<div class="about">
    <p>{{this.$store.state.name}}</p>
</div>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 3,051评论 0 7
  • Vuex是什么? Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件...
    萧玄辞阅读 3,238评论 0 6
  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应...
    白水螺丝阅读 4,800评论 7 61
  • vuex 场景重现:一个用户在注册页面注册了手机号码,跳转到登录页面也想拿到这个手机号码,你可以通过vue的组件化...
    sunny519111阅读 8,166评论 4 111
  • Vuex 的学习记录 资料参考网址Vuex中文官网Vuex项目结构示例 -- 购物车Vuex 通俗版教程Nuxt....
    流云012阅读 1,543评论 0 7

友情链接更多精彩内容