第一步:

安装vuex:npm install vuex --save

第二步:在src下创建文件夹store及文件index.js

import Vue from 'vue';

import Vuex from 'vuex';

Vue.use(Vuex);
 
//导出实例对象
export default new Vuex.Store({
state: {
text: '1',
},
mutations: {
render(state, key) {
state.text += key;
}
}
})
 
第三步:在main.js中引入
import store from './store' 
 
//加入根实例中
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
  

第四步:在.vue文件中使用

<template>
<div id="app">
<el-button @click="query" type="primary">查询</el-button>
<el-button @click="add" type="success">增加</el-button>
</div>
</template>
 
<script>
export default {
data() {
return {
msg: ""
};
},
methods: {
query() {
// console.log("获取vue中tex值:");
this.msg=this.$store.state.text;
// console.log(this.msg)
},
add(){
// this.msg +=1;
this.$store.commit('render',10);
console.log(this.$store.state.text)
}
}
};
</script>

vuex的使用步骤的更多相关文章

  1. vuex - 简单使用步骤梳理,轻松掌握、附源码

    -----------------------往期----------------------------- vuex - 学习日记 vuex - 辅助函数学习 vuex - 常用命令学习及用法整理 ...

  2. [vuex]——使用vuex解决模块间传值问题

    二月的第四个周末,在家.受寒流的影响,深圳天气持续冰冻了好几天,天冷人就变得懒动,迷迷糊糊睡到了快十点,终于在饥饿的催促下起床. 和妹子吃完粥后,百无聊赖.透过窗户,发现太阳依旧没有露头的打算,我们也 ...

  3. Vuex源码分析(转)

    当我们用vue在开发的过程中,经常会遇到以下问题 多个vue组件共享状态 Vue组件间的通讯 在项目不复杂的时候,我们会利用全局事件bus的方式解决,但随着复杂度的提升,用这种方式将会使得代码难以维护 ...

  4. VUE + vue-cli + webpack 创建新项目

    首先记录一下命令. 这是一个睿智新手的笔记. p.s.这是配置好环境以后的命令. ----------------------------------------------- $ npm insta ...

  5. vuex2.0源码分析

    当我们用vue在开发的过程中,经常会遇到以下问题 多个vue组件共享状态 Vue组件间的通讯 在项目不复杂的时候,我们会利用全局事件bus的方式解决,但随着复杂度的提升,用这种方式将会使得代码难以维护 ...

  6. vue全家桶(4.2)

    5.2.使用vuex重构上面代码 Vuex是什么?官方定义:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测 ...

  7. 一个轻量级的.Net Core微服务快速开发的轮子

    前言     Adnc是一个轻量级的.Net Core微服务快速开发框架,同时也可以应用于单体架构系统的开发.框架基于JWT认证授权.集成了一系列微服务配套组件,代码简洁.易上手.学习成本低.开箱即用 ...

  8. vue+element初始化创建项目

    初始化 步骤1:选择开发框架并创建 步骤1:vue create shop   回车步骤2:安装方式选择第二个自定义步骤3:安装模块: (*) Babel ( ) TypeScript ( ) Pro ...

  9. 简单使用Vuex步骤及注意事项

    使用Vuex的步骤: (1)安装: 1.使用npm安装: npm install vuex --save 2.使用script标签引入 <script src="/path/to/vu ...

随机推荐

  1. 原型模式 prototype 创建型 设计模式(七)

    原型模式  prototype 意图 用原型实例指定需要创建的对象的类型,然后使用复制这个原型对象的方法创建出更多同类型的对象   显然,原型模式就是给出一个对象,然后克隆一个或者更多个对象 小时候看 ...

  2. 好用的Chrome插件推荐

    无扩展,不 Chrome :几款 Chrome 扩展程序推荐 相信很多人都在使用 Chrome 浏览器,其流畅的浏览体验得到了不少用户的偏爱,但流畅只是一方面, Chrome 最大的优势还是其支持众多 ...

  3. 第一册:lesson 103.

    原文:The French text. How was the exam, Richard? Not too bad. I think I passed in English and Mathemat ...

  4. Java开发笔记(七十八)面向对象的后门——反射

    作为一门面向对象的编程语言,Java认为一切皆是对象,每个对象都能归属于某个类,甚至每个类均可提取出一种特殊的类型,即Class类型.早在前面介绍多态的时候,就提到每个类都存在独一无二的基因,通过比较 ...

  5. Selenium自动化-入门1

    起初写博客是为了妹子学习,现在发现忽略了最基础的Selenium教程,所以:从本博客开始编辑 Selenium 入门知识.(学好Java) Selenium 入门 1:(学好Java) 录制回放,简单 ...

  6. Html5: Drawing with text

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

  7. 【代码笔记】Web-CSS-CSS Padding(填充)

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  8. C#网络请求与JSON解析

    最新学校的海康摄像头集控平台(网页端)不能在win10里登录,我寻思着拿海康的c# demo直接改. 首先得解决权限问题,每个教师任教不同年级,只能看到自己所在年级的设备,涉及到登录,在此记录一下C# ...

  9. FocusListener焦点监听器

    [FocusListener焦点监听器] public class Demo extends JFrame { public Demo(){ setDefaultCloseOperation(Wind ...

  10. Android 中使用 dlib+opencv 实现动态人脸检测

    1 概述 完成 Android 相机预览功能以后,在此基础上我使用 dlib 与 opencv 库做了一个关于人脸检测的 demo.该 demo 在相机预览过程中对人脸进行实时检测,并将检测到的人脸用 ...