3.vuex学习之mutationsmapmutations(代码片段)

你丫才美工 你丫才美工     2022-11-18     447

关键词:

mutations状态更改

  在mutations对象中创建更改state状态的方法。mapMutations是vuex提供的辅助函数

在store.js中

import Vue from vue
import Vuex from vuex

Vue.use(Vuex)

//访问状态对象
const state = 
    count:1


// 触发的状态,mutations是同步的
const mutations = 
    jian(state)//传入一个state对象
        state.count--
    ,
    jia(state,n)
        state.count+=n.a
    



export default new Vuex.Store(
    state,
    mutations
)

在App.vue文件中

<template>
  <div id="app">
    
    <img src="./assets/logo.png">
    <h1> msg</h1>
    <!--访问状态对象-->
    <div>使用mutation触发改变状态-->$store.state.count</div>
    <!--用commit访问触发的mutations里面的方法-->
    <button @click="$store.commit(‘jia‘,a:10)">+</button>
    <!--使用mapMutations-->
    <button @click="jian">-</button>
  </div>
</template>

<script>

//vuex提供的辅助函数
import mapState,mapMutations,mapGetters,mapActions from vuex
export default 
  name: app,
  data () 
    return 
      msg: Welcome to Your Vue.js App
    
  ,
  
  //解决页面白屏问题
  mounted()
    if(app.hasChildNodes())
          loading.style.display="none";
       else
         console.log(app.childNodes)
       
  ,

  // methods:mapMutations([
  //   jian
  // ])
  methods:
    ...mapMutations([//
      jian
    ])
  

</script>

<style>
#app 
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;


h1, h2 
  font-weight: normal;


ul 
  list-style-type: none;
  padding: 0;


li 
  display: inline-block;
  margin: 0 10px;


a 
  color: #42b983;

</style>

 

机器学习之参数估计

ProbabilityTheoryfocusoncomputingtheprobabilityofdataarisingfromaparametricmodelwithknownparameters.StatisticalInferenceflipsthisonitshead:wewillestimatetheprobabilityofparametersgivenaparametricmodel 查看详情

springboot学习之resttemplate

getForEntitygetForObject通用方法exchange 查看详情

vim学习之键盘布局

打印出vim键盘布局,巩固学习 查看详情

docker学习之初识container

查看详情

fmea学习之pfmea

FEMA之PFEMA学习笔记整理FEMA之PFEMA学习笔记整理 查看详情

django学习之文件上传

Django学习之文件上传就这么六步!一、settings配置文件中配置MEDIA_URL='/media/'MEDIA_ROOT=os.path.join(BASE_DIR,'medias').replace('','/')#media即为图片上传的根路径二、url路由中配置urlpatterns=[url(r'^adm 查看详情

01_springsecurity学习之配置httpsecurit

01_SpringSecurity学习之配置HttpSecurithttps://blog.csdn.net/ShiJunzhiCome/article/details/126064450  查看详情

gradledls学习之resolutionstrategy

Definesthestrategiesarounddependencyresolution.Forexample,forcingcertaindependencyversions,substitutions,conflictresolutionsorsnapshottimeouts.Examples:applyplugin:‘java‘//sothattherearesomeconfigurat 查看详情

java学习之位运算(操作)总结

...年的深度,故而写此系列。其他Java系列文章:​​Java学习之编译、反编译以及字节码入门​​​​Java学习之String​​​​Java学习之JDK9新特性​​位操作,简单确强大,有一两拨千金奇效;可是平时工作中用得真心不多,故此... 查看详情

spark学习之作业优化

...。对往期内容感兴趣的同学可以参考👇:链接:spark学习之处理数据倾斜.链接:spark学习之sparksql语法优化.链接:spark学习之资源调度.链接:spark学 查看详情

angularjs学习之表单

1.HTML控件:以下HTMLinput元素被称为HTML控件:**input元素**select元素**button元素**textarea元素 2.AngularJS表单实例:<divng-app="myApp"ng-controller="formCtrl">  <formnovalidate>     // 查看详情

集成学习之boosting——adaboost原理

集成学习之Boosting——AdaBoost原理集成学习之Boosting——AdaBoost实现集成学习大致可分为两大类:Bagging和Boosting。Bagging一般使用强学习器,其个体学习器之间不存在强依赖关系,容易并行。Boosting则使用弱分类器,其个体学习器之... 查看详情

深度学习之bert中文分类学习

深度学习之Bert中文分类学习BERT实验预训练结果分析tfhub_handle_preprocess="https://hub.tensorflow.google.cn/tensorflow/bert_zh_preprocess/3"bert_preprocess_model=hub.KerasLayer(tfhub_handle_preprocess)text_test=['我真是个天才啊! 查看详情

redis学习之key

/**设置值,获取值,删除值**/redis127.0.0.1:6379>setkey‘mynameisimay‘//设置key的值OKredis127.0.0.1:6379>getkey//获取key的值"mynameisimay"redis127.0.0.1:6379>delkey//删除这个key(integer)1  查看详情

前端学习之html

HTML介绍Web服务本质importsocketsk=socket.socket()sk.bind(("127.0.0.1",8080))sk.listen(5)whileTrue:conn,addr=sk.accept()data=conn.recv(8096)conn.send(b"HTTP/1.1200OK")conn.send(b"<h1>Helloworld 查看详情

htmldom学习之二

1.HTMLDOM属性:**innerHTML属性-获取元素内容的最简单方法是使用innerHTML属性,innerHTML属性对于获取或替换HTML元素的内容很有用<html><body><pid="intro">Helloworld!</p><script>vartxt=document.getElementById("intro") 查看详情

hbase学习之bulkload

HBase学习之BulkLoad   参考资料:1、https://blog.csdn.net/shixiaoguo90/article/details/78038462,使用hbase自带的importtsv实现bulkload,重点参考,hbase自带的bulkload只有在hbase1.0版本中有,2.0版本中没有2、https://blog.csdn.net/ 查看详情

kotlin学习之反射

获取Class对象funmain(args:Array<String>)valnums=ArrayList<Int>()println(nums::class)println(Person::class)valperson=Person()println(person 查看详情