vuex 快速上手,具体使用方法总结(含使用例子)

网上有关vuex的文章很多,我这里只讲实用的:

vuex 用处:管理全局状态(类似全局变量,每个组件都能访问到)

vuex 用法:

//下面是一个js文件,用最简单最全的例子展示了全局数据 city 和 cityID 的声明以及改变的方法;
import Vue from ‘vue‘;
import Vuex from ‘vuex‘;
Vue.use(Vuex);
const store = new Vuex.Store({
  state: {
    city: ‘深圳‘,
    cityID: "1"
  },
  getters: {
    getCity(state) { //方法名随意,主要是来承载变化的city的值,下面mutations,actions里面的方法名也是随意定的
      return state.city
    },
    getCityId() { //方法名随意,主要是用来承载变化的cityID的值,下面mutations,actions里面的方法名也是随意的
      return state.cityID
    }
  },
  mutations: {
    setCity(state, value) {
      state.city = value;
    },
    setCityID(state, value) {
      state.cityID = value;
    }
  },
  actions: {
    selectCity(context, params) {
      context.commit(‘setCity‘, params.city);
    },
    selectCityID(context, params) {
      context.commit(‘setCityID‘, params.id);
    }
  }
});
export default store;

获取和修改state有使用辅助函数和不使用两种方法,如果使用,请在使用的文件中添加:

import {mapState,mapGetters,mapMutations,mapActions} from ‘vuex‘

用到里面哪个就引入哪个,如果不使用则不需要添加。

获取state的方法:

1.不引入 mapState: this.$store.state2.引入 mapState: 
  computed: {
    //设置别名,起到简化代码的作用,比如this.$store.state.cityID可以用this.cId替代
    // 方法一:
    // ...mapState({
    //   cId: state => state.cityID,
    //   cname:state => state.city
    // }),
    // 方法二:
    // ...mapState({
    //   cId: ‘cityID‘,
    //   cname:‘city‘
    // }),
    // 方法三(不设置别名,直接使用this.cityID即可):
    ...mapState([‘cityID‘,‘city‘]),
  },

修改state的方法:

1.不引入 mapState:

方法一: 用this.$store.commit执行mutation里的方法 //this.$store.commit("setCityID", 6);
方法二: 用 this.$store.dispatch执行actions里的方法
//this.$store.dispatch("selectCity", { id: 6});

2.引入 mapState(和获取state一样能设置别名,下面不配置别名):

  methods: {
    ...mapActions([‘cityID‘,‘selectCityID‘]),
    changeId(params) { //params为要修改的数,比如6
      this.selectCityID({ id:params });
       console.log(this.$store.state);//这时候打印出来cityID变为6了
    }
  },
 

原文地址:https://www.cnblogs.com/wiliam/p/12084442.html

时间: 2024-10-30 02:00:27

vuex 快速上手,具体使用方法总结(含使用例子)的相关文章

Solr基础理论与维护管理快速上手(含查询参数说明)

1. solr基础 因为 Solr 包装并扩展了 Lucene,所以它们使用很多相同的术语.更重要的是,Solr 创建的索引与 Lucene 搜索引擎库完全兼容.通过对 Solr 进行适当的配置,某些情况下可能需要进行编码,Solr 可以阅读和使用构建到其他 Lucene 应用程序中的索引. 在 Solr 和 Lucene 中,使用一个或多个 Document 来构建索引.Document 包括一个或多个 Field.Field 包括名称.内容以及告诉 Solr 如何处理内容的元数据.例如,Fi

『转载』Debussy快速上手(Verdi相似)

『转载』Debussy快速上手(Verdi相似) Debussy 是NOVAS Software, Inc(思源科技)发展的HDL Debug & Analysis tool,这套软体主要不是用来跑模拟或看波形,它最强大的功能是:能够在HDL source code.schematic diagram.waveform.state bubble diagram之间,即时做trace,协助工程师debug. 可能您会觉的:只要有simulator如ModelSim就可以做debug了,我何必再学这

DPDK快速上手指南(18.02)

DPDK快速上手(linux) 本文档主要来自linux_gsg-18.02.pdf的翻译,翻译肯定有不妥之处,请批评指正,我会随后修改,不胜感激. 1. 介绍 本文档包含有关DPDK(Data Plane Development Kit的缩写)软件的安装和配置的说明,目的就是让用户快速用起来.本文档描述怎样在linux应用环境下编译和运行一个DPDK应用程序,而不过多深入细节. 1.1文档路线图 以下是针对所有DPDK文档建议的阅读顺序: 发布说明(Release Notes):提供具体的发布

《Python编程快速上手 让繁琐工作自动化》pdf

<div id="article_content" class="article_content tracking-ad" data-mod="popu_307" data-dsm="post"> <p><br></p><p>下载地址:<a target="_blank" href="https://page74.ctfile.co

Masonry介绍与使用实践:快速上手Autolayout

以上是纯手写代码所经历的关于页面布局的三个时期 在iphone1-iphone3gs时代 window的size固定为(320,480) 我们只需要简单计算一下相对位置就好了 在iphone4-iphone4s时代 苹果推出了retina屏 但是给了码农们非常大的福利:window的size不变 在iphone5-iphone5s时代 window的size变了(320,568) 这时autoresizingMask派上了用场(为啥这时候不用Autolayout? 因为还要支持ios5呗) 简单

MongoDB快速上手

1.  MongoDB简介 MongoDB是一个跨平台的基于Key_Value键值对形式保存数据的NoSQL文档类型数据库. NoSQL(not only sql)数据库,泛指非关系型数据库. 1.1 NoSQL数据库的特点 l  不需要预定义模式 不需要事先定义数据模式,预定义表结构.数据中的每条记录都可能有不同的属性和格式.当插入数据时,并不需要预先定义它们的模式. l  无共享架构 相对于将所有数据存储的存储区域网络中的全共享架构.NoSQL往往将数据划分后存储在各个本地服务器上.因为从本

intellij idea 13&amp;14 插件推荐及快速上手建议 (已更新!)

原文:intellij idea 13&14 插件推荐及快速上手建议 (已更新!) 早些年 在外企的时候,公司用的是intellij idea ,当时也是从eclipse.MyEclipse转过去的很是不习惯. 用了一周明显感觉爱上它了.因为它很智能,而且能纠正你很多不好的习惯. 后来跳巢到一家上市公司.因为大家都在用MyEclipse,要求开发工具统一.没办法只能转回MyEclipse.不过个人倒是一直关注intellij idea版本的发布和新的功能. 最近开始使用intellij idea

AJAX快速上手

创建XMLHttpRequest对象 xmlHttp = new XMLHttpRequest(); xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');//IE XMLHttpRequest对象相关方法 打开请求 XMLHttpRequest.open(传递方式,地址,是否异步请求) 准备就绪执行 XMLHttpRequest.onreadystatechange 获取执行结果 XMLHttpRequest.responseText 上手小实践 /

UnityShader快速上手指南(二)

简介 前一篇介绍了如果编写最基本的shader,接下来本文将会简单的深入一下,我们先来看下效果吧 呃,gif效果不好,实际效果是很平滑的动态过渡 实现思路 1.首先我们要实现一个彩色方块 2.让色彩动起来 over 实现一个RGB CUBE 先看代码吧: Shader "LT/Lesson2" { Properties { _OffsetX ("Offset X", Range (-1.5, 1.5) ) = 0 _OffsetY ("Offset Y&q