vuex的初始化使用_vuex初始化数据_wangwei830的博客-程序员秘密

技术标签： css  html5  Vue  css3  

main.js

在这里插入图片描述

store/index.js

在这里插入图片描述

store/index.js 共享数据 共享行动 共享操作

在这里插入图片描述

大伟vuex示例

main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router"
import router from  './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import store from './store'

Vue.use(VueRouter);
Vue.use(ElementUI);

Vue.config.productionTip = false

new Vue({
    
  router,
  store,
  render: h => h(App)
}).$mount('#app')

index.js


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

const actions={
    
    wangwei_jia(context,value){
    
        console.log("wangwei_jia,running....",context,value)
        context.commit('WANGWEI_JIA',value)
    }
}

const  mutations={
    
    WANGWEI_JIA(state,value){
    
        console.log("WANGWEI_JIA,开始操作数据了...",state,value)
        state.wangwei+=value
    }
}

const state={
    
    wangwei:100,
    aaaaaaa:200,
}

export default new Vuex.Store({
    
    actions,
    mutations,
    state,
})

App.vue

<template>
  <div id="app">
    <router-view></router-view>
    wangwei的值：{
   {$store.state.wangwei}}
    <hr>
    <select v-model.number="x">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="wangwei_jia">加</button>
  </div>
</template>

<script>
  export default {
      
    name: 'App',
    data(){
      
      return {
      
        x: 0
      }
    },
    methods:{
      
      wangwei_jia(){
      
        this.$store.dispatch('wangwei_jia',this.x)
      }
    },
    mounted() {
      
      console.log('APP---WANGWEI-------',this)
      console.log()
    }
  }
</script>

<style>

</style>
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46426259/article/details/121969365

智能推荐

百度开源情感分析Senta，让你更懂用户_百度情感分类_PaddleWeekly的博客-程序员秘密

引言好友们在聊你不认识的明星八卦，想参与讨论又不知所措？产品刚投入市场，想了解用户最真实的反馈而不只是抽样调查？平台上运营着数万家电商，想从中挑出口碑好、潜力大的客户针对性重点扶持？……互联网时代，用户产生了海量的评论信息。电商、美食、酒店、旅游、购物……面对这些海量的评论数据，如果没有优质的自然语言处理（NLP）技术，它们就只能静静地躺在数据库里，无法创造价值。那么如何从这些...

OpenStack修改Guest用户密码——利用Qemu guest agent实现_qemu agent 重置密码_wanghuiict的博客-程序员秘密

qemu-guest-agent修改Windows用户的密码在OpenStack中，使用qemu guest agent为Windows虚拟机的用户修改密码。配置Glance image为Windows image指定元数据 hw_qemu_guest_agent=yes。# openstack image set --property hw_qemu_guest_agent=ye...

EA2A(Excel/Access to Access)_cadenza7的博客-程序员秘密

软件名称: EA2A(Excel/Access to Access)软件版本: beta2授权形式: 免费软件运行平台: Win9x/Me/NT/2000/XP/2003数据库升级后原有表中字段会增加，此时我们就需要导入（迁移）数据，此程序为实现此功能而编写。通常软件升级后，数据库也会有所改变，此时就需要对客户使用的数据库进行升级。升级客户数据库的方式有：1.修改当前数据表的字段，比如添加

如何优雅地过滤敏感词_敏感词过滤_不才黄某的博客-程序员秘密

敏感词过滤功能在很多地方都会用到，理论上在Web应用中，只要涉及用户输入的地方，都需要进行文本校验，如：XSS校验、SQL注入检验、敏感词过滤等。今天着重讲讲如何优雅高效地实现敏感词过滤。敏感词过滤方案一先讲讲笔者在上家公司是如何实现敏感词过滤的。当时毕竟还年轻，所以使用的是最简单的过滤方案。简单来说就是对于要进行检测的文本，遍历所有敏感词，逐个检测输入的文本中是否含有指定的敏感词。这种方...

Access导出到Excel_access export excel_changyuming的博客-程序员秘密

public partial class Form1 : Form    {        OleDbConnection myConnection;        OleDbCommand myCommand;        OleDbDataReader myDataReader;        DataTable table;        string fileName = "";    

mfc中设置statictext的字体和颜色_mfc设置static字体颜色_浪小满的博客-程序员秘密

字体在控制事件中实现，颜色在OnCtlColor中实现。界面上两个button，一个statictext。设置statictext的value变量为m_csText；其余变量为：BOOL m_bBlue;BOOL m_bRed;在构造函数中初始化：CTextColorExampleDlg::CTextColorExampleDlg(CWnd* pParent

随便推点

notepad++ 使用_csdn上64bit的pluginmanager_v1.4.9_x64.7z下载地址_竹蜻蜓en的博客-程序员秘密

安装notepad + +  notepad++的下载、安装非常easy。下一步下一步，所有选项都默认就可以安装好。但有几点需要注意。   截止到写这篇博文，notepad++的最新版本为7.5.4。分为32bit和64bit两种。   在7.5之前的版本中，32bit版有插件管理功能，64bit版没有插件管理功能。    在7.5之后的版本中，无论32bit还是64bit版，都没有插件...

Numpy 改变数组维度的几种方法_np.array()统一维度_小饼干超人的博客-程序员秘密

来自 《Python数据分析基础教程：Numpy 学习指南（第2版）》Numpy改变数组维度的方法有：reshape()ravel()flatten()用元组设置维度transpose()resize()下面将依次进行说明    0. 首先，创建一个多维数组from numpy import * a = arange(24)    得到：[ 0 1 2 3 4 5 6 7 8 ...

UPC-高校排名_Round moon的博客-程序员秘密

UPC-高校排名题目描述大学排名在现在已经非常流行.比如:在http://www.netbig.com你就能得到关于中国大学排名信息.我们知道，在一个大学里有很多系，某个大学的有些系很出名，但另一些系不出名，因此有很多关于系的排名。到底哪个大学好呢，波布博士提出了一个新概念“绝对更好”，来使这个难题被部份解决。下面我举一个例子来说明这个概念。现有三所大学：X，Y，Z，每个大学有三个系：C...

python编游戏_用Python和Pygame写游戏-从入门到精通（目录）_weixin_39644952的博客-程序员秘密

目光博客一开始，就有一个将pygame好好介绍一遍的宏伟计划，历时四个月，在各位朋友的关怀鞭策下，如今（2011/8/26）理论学习的部分似乎已经都完成了，在次列一个目录，方便查询。介绍还不是很全，下次有时间补充完整一些。python.cn也有一个目录在这里，这个系列很多流量都是来自它，表示感谢。系统学习部分Pygame的历史，安装Pygame，第一个Pygame脚本理解游戏中的事件Pygmae的...

Access VBA Programming_julitta korol_topmvp的博客-程序员秘密

版权声明：原创作品，允许转载，转载时请务必以超链接形式标明文章原始出版、作者信息和本声明。否则将追究法律责任。http://blog.csdn.net/topmvp - topmvpTake a look at this great application of VBA and learn to expand the capabilities of Access with simple progr

背包问题（3种的小总结）_HelloWorldZTR的博客-程序员秘密

背包问题我实在是太弱了，这种东西才会这么点分类完全背包[√]01背包[√]多重背包[√]毫无人性的乱七八糟的坑人专用背包[X]定义首先背包有一个共同的定义：有n种物品，每件物品都有一个价值vi和一个重量wi。（具体每件物品有几件，物品之间有什么主从关系是有分别的）我们现在有一个背包，容量为c，我们要在容量范围之内（可以不装满）尽量装下价值最大的物品。完全背包完全背...

推荐文章

热门文章

相关标签