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基本介绍,包含实战示例及代码(基于Vue2.X)

    VUEX 1 VUEX基本介绍 1.1 官方API 1.2 什么是vuex 1.3 Vuex使用场景 1、Vuex...

  • 【文档笔记】-Vuex

    什么是vuex? vuex文档: https://vuex.vuejs.org/zh/[https://vuex....

  • vuex配置

    vuex配置 目录 vuex的五个核心 配置vuex vuex持久化 一、vuex五个核心概念 State 定义状...

  • Vuex

    安装Vuex cnpm install vuex --save-dev Vuex是什么? 这是[Vuex的官网](...

  • Vuex

    1.Vuex概述 2.Vuex基本使用 3.使用Vuex完成todo案例 1.Vuex概述 Vuex是实现组件全局...

  • vuex

    Vuex介绍: Vuex官网:http://vuex.vuejs.org/ Vuex是实现数据状态管理的技...

  • vuex+axios 的开发流程记录

    相关文档 vuex: https://vuex.vuejs.org/zh/ 是否有必要使用vuex vuex是vu...

  • 2019-06-07

    import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)...

  • 配置 vuex 和 vuex 本地持久化

    配置 vuex 和 vuex 本地持久化 目录 vuex是什么 vuex 的五个核心概念State 定义状态(变量...

  • vuex

    配置 vuex 和 vuex 本地持久化 目录 vuex是什么 vuex 的五个核心概念State 定义状态(变量...

网友评论

      本文标题:vuex

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