vuex

作者: Hachiman | 来源:发表于2018-06-15 17:27 被阅读0次

    使用方法

    在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>
    

    相关文章

      网友评论

          本文标题:vuex

          本文链接:https://www.haomeiwen.com/subject/cjxmeftx.html