vue2，HR的话扎心了

2024-04-11 13:41:30

{{msg}}

{{$store.state.count}}

<button @click="$store.commit(‘add’)">+

<button @click="$store.commit(‘reduce’)">-

二、state访问状态对象

{{$store.state.count}}--{{count}}

目的：让$store.state.count的值赋给count，使用count直接显示结果

{{msg}}

{{$store.state.count}}--{{count}}

<button @click="$store.commit(‘add’)">+

<button @click="$store.commit(‘reduce’)">-

三、Mutations修改状态

传递参数

//操作变量的方法

const mutations={

add(state,n){

// state.count++;

state.count+=n;

},

reduce(state){

state.count–;

}

}

调用

<button @click="$store.commit(‘add’,10)">+

** 第一个参数书方法名，第二个参数书变量

修改方法:

a、引入：

//方式二利用mapState这里注意mapState要加{}，文档有坑

import {mapState, mapMutations} from ‘vuex’;

这里要加mapMutations

b、重写

methods:mapMutations([‘add’,‘reduce’]),

c、使用

<button @click=“reduce”>-

四、getters计算过滤操作

每次对state.count的操作都会经过这个过滤操作

store.js中操作

//getters计算过滤操作

const getters={

count:function(){

return state.count+=10;

}

}

// 外面使用需要进行暴露

export default new Vuex.Store({

state,

mutations,

getters

})

在模板中使用：

import { mapState, mapMutations, mapGetters}

computed: {

…mapState([‘count’]),

// count(){

// return this.$store.getters.count;

// }

…mapGetters([‘count’])

},

五、actions异步修改状态

在store.js中

// actions异步修改状态

const actions={

addAction(context){

context.commit(‘add’,10);

setTimeout(()=>{

context.commit(‘reduce’)

},3000);

},

reduceAction({commit}){

commit(‘reduce’);

}

}

// 外面使用需要进行暴露

export default new Vuex.Store({

state,

mutations,

getters,

在store.js中

// actions异步修改状态

const actions={

addAction(context){

context.commit(‘add’,10);

setTimeout(()=>{

context.commit(‘reduce’)

},3000);

},

reduceAction({commit}){

commit(‘reduce’);

}

}

// 外面使用需要进行暴露

export default new Vuex.Store({

state,

mutations,

getters,

vue2，HR的话扎心了相关推荐

37岁被裁员，大公司不愿要，无奈去小公司面试，HR的话扎心了
对于很多程序员来说,最担心的应该就是中年危机,其实不止是程序员,还是很多打工的朋友都会面临这个问题,到了一定年纪,如果你还是一线员工,那基本逃不过裁员的危机,公司只要裁员第一个就是这类员工. 最近在职 ...
37岁被裁员，出来再找工作，大公司不愿要，无奈去小公司面试，HR的话扎心了
对于很多程序员来说,最担心的应该就是中年危机,其实不止是程序员,还是很多打工的朋友都会面临这个问题,到了一定年纪,如果你还是一线员工,那基本逃不过裁员的危机,公司只要裁员第一个就是这类员工. 最近在职 ...
java常用技术栈，HR的话扎心了
1.简单工厂(非23种设计模式中的一种) 实现方式: BeanFactory.Spring中的BeanFactory就是简单工厂模式的体现,根据传入一个唯一的标识来获得Bean对象,但是否是在传入参数 ...
java超市管理系统项目，HR的话扎心了
一.Netty概念及体系结构 01 Netty--异步和事件驱动 Java网络编程NIO选择器 Netty的简介.谁在使用Netty.异步和事件驱动 Netty的核心组件 02 你的第一款Netty应 ...
ELK性能优化实战分析，HR的话扎心了
面:为什么要使用双亲委派机制去加载类? 答:避免多份同样字节码的加载,浪费内存. 类的加载方式隐式加载:new 显示加载:loadClass.forName等类的装载过程如下图: 面:loadCl ...
java图书馆管理系统源代码，HR的话扎心了
蚂蚁金服关于spring部分面试问题: Spring bean的生命周期能不能结合源码回答一下这个问题 Spring容器当中包含了哪些常用组件(至少说5个),作用是什么,场景是什么: Spring自动 ...
iOS 开发基础，HR的话扎心了
在App安装过程中,系统为每个App生成它的主目录和一些关键的子目录,通常的路径为: /ApplicationRoot/ApplicationID/ App包(Application Bundle) ...
java基础面试重点，HR的话扎心了
前言 Spring 也算有多年的历史了,已成为Java应用程序开发框架的事实标准.在如此悠久的历史背景下,有人可能会认为Spring放慢了脚步,躺在了自己的荣誉簿上,再也做不出什么新鲜的东西,或者是让 ...
java微信开发sdk，HR的话扎心了
01 分布式限流:Nginx+ZooKeeper 1.1 分布式限流之Nginx 请解释一下什么是 Nginx? 请列举 x Nginx 的一些特性. 请列举 x Nginx 和和 Apache 之 ...

最新文章

热门文章