vuex 简单加减

男娘i 2022-05-31 07:58 168阅读 0赞

main.js

// The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import store from './store'
    import App from './vuex'
    import router from './router'
    import vuex from './vuex.vue'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      store,
      router,
      render: xx=>xx(vuex)
    })

store.js

import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    
    const state={
    	count:44
    }
    
    const mutations={
    	add(state){
    		state.count++
    	},
    	plus(state){
    		state.count--
    	}
    }
    
    export default new Vuex.Store({
    	state,
    	mutations
    })

vuex.vue

import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    
    const state={
    	count:44
    }
    
    const mutations={
    	add(state){
    		state.count++
    	},
    	plus(state){
    		state.count--
    	}
    }
    
    export default new Vuex.Store({
    	state,
    	mutations
    })

注意的是：在computed中定义了count属性，就不需要在data中重新定义了。而且计算属性是基于依赖缓存的，所以达到了数据同步的效果。

发表评论取消回复

表情：

评论列表（有 0 条评论，168人围观）

还没有评论，来说两句吧...

相关阅读

相关制作实现加减乘除运算的简单计算器

1 问题在python中我们学习了条件语句，那么是否可以制作一个简单计算器呢？ 2 方法使用while循环和if 条件语句控制计算器，在输出需要使用到占位符：%s

偏执的太偏执、/ 2024年03月23日 16:03/ 0 赞/ 70 阅读

相关 jq简单实现购物车加减功能

![在这里插入图片描述][20210113153606726.png_pic_center] <style> .num-input { height: 30px; }

比眉伴天荒/ 2023年01月06日 01:17/ 0 赞/ 181 阅读

相关 js date日期简单封装，时间加减

//js格式化时间 "yyyy-MM-dd hh:mm:ss" Date.prototype.Format = function (fmt) {

客官°小女子只卖身不卖艺/ 2022年09月25日 00:20/ 0 赞/ 230 阅读

相关 JavaScript 简单实现加减乘除运算

JavaScript 简单实现加减乘除运算新手学习，不足之处，多多指正。要求输入两个数字，点击按钮在文本框中返回值。上代码： <!

冷不防/ 2022年06月17日 12:15/ 0 赞/ 280 阅读

相关 javascript的简单加减乘除

<table> <tbody> <tr> <td><span><head></span></td> </tr> <tr> <t

た入场券/ 2022年06月09日 10:54/ 0 赞/ 164 阅读

相关 Vuex简单入门

今天试了一下Vuex,感觉跟Redux的实现思想类似。再此，简单地总结一下。什么是Vuex 在Vue中，多组件的开发给我们带来了很多的方便，但同时当项目规模变大的时候

谁践踏了优雅/ 2022年06月04日 06:43/ 0 赞/ 255 阅读

相关 vuex 简单加减

main.js // The Vue build version to load with the `import` command // (runtime-

男娘i/ 2022年05月31日 07:58/ 0 赞/ 169 阅读

相关 mysql日期加减

mysql日期加减一、MySQL 为日期增加一个时间间隔：date\_add()。 1、示例： set @dt = now(); select date\_add(

迷南。/ 2021年09月26日 16:14/ 0 赞/ 483 阅读

相关 Vuex简单入门

一、简介官网介绍： > Vuex是一个专为Vue开发的应用程序的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变

野性酷女/ 2021年09月16日 08:08/ 0 赞/ 442 阅读

相关 Vuex简单入门

一.什么是Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理架构。它借鉴了 Flux 和 Redux的设计思想,它采用集中式存储管理应用的所有组件的状态

偏执的太偏执、/ 2021年09月15日 02:20/ 0 赞/ 506 阅读