vuex

2018-06-15  本文已影响0人  Hachiman

使用方法

在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>
上一篇下一篇

猜你喜欢

热点阅读