Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)


Posted in Javascript onSeptember 15, 2017

在这之前,我已经分享过组件与组件的通信机制以及父子组件之间的通信机制,而我们的vuex就是为了解决组件通信问题的

vuex是什么东东呢?

组件通信的本质其实就是在组件之间传递数据或组件的状态(这里将数据和状态统称为状态),但可以看到如果我们通过最基本的方式来进行通信,一旦需要管理的状态多了,代码就会变得十分臃肿和庞大。对所有状态的管理便会显得力不从心,因此,vuex出现了,他就是帮助我们把公用的状态全抽出来放在vuex的容器中,然后根据一定的规则来进行管理,我们赶紧来用一下吧,想要掌握vuex的用法,你应该要掌握组件之间的通信,如果不了解,请参考以下这两篇文章:

搭建环境开始:

在git命令行下,执行以下命令完成环境的搭建:

1,npm install --global vue-cli  安装vue命令行工具

2,vue init webpack vue-demo   使用vue命令生成一个webpack项目,项目名称为vue-demo

3,cd vue-demo 切入项目

4,npm install安装package.json中的所有依赖包

5,npm run dev运行项目

然后删除默认的Hello.vue组件,把App.vue整理成以下样子

<template>
 <div id="app">
 这是一个空的app
 </div>
</template>

<script>
 export default {
  name : 'app'
 }
</script>

 把router下面index.js文件修改如下:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
 routes: [
  {
   path: '/',
  }
 ]
})

基本环境搭建完毕之后,开始安装vuex了

安装命令:npm install vuex --save-dev

一、安装完成之后,在main.js中引入,并注册store:这样我们就能通过this.$store来获得这个容器了

main.js代码:

import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
import store from './vuex/store'

Vue.use(Vuex)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 store,
 template: '<App/>',
 components: { App }
})

二、在src目录下创建vuex目录,然后在vuex目录下创建store.js,用于存放所有的状态(改变的数据)

store.js代码:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
 state: {
  userName : 'ghostwu'
 }
})

export default store

在state存储了一个状态userName

三、将状态中的数据渲染到组件中

在components下面新建一个组件Main.vue,代码如下:

<template>
  <div>
    <h3>{{myName}}</h3>
  </div>
</template>
<script>
  export default {
    name : "Main",
    computed : {
      myName (){
        return this.$store.state.userName;
      }
    }
  }
</script>

通过一个计算属性获取到存储在全局容器store中state保存的状态值

四,在App.vue中引入组件Main.vue

App.vue代码:

<template>
 <div id="app">
  <Mainc></Mainc>
 </div>
</template>

<script>
import Mainc from './components/Main.vue';
export default {
 name: 'app',
 components : {
  Mainc
 }
}
</script>

这个时候,就能看见在页面上把store容器中 state的userName的值读取出来了, 如果修改userName的值,页面上也会发生变化

五、,我们通过一些交互来改变状态,看下组件是否能收到state的值

在components组件下新建一个Header.vue组件,代码如下:

<template>
  <div>
    <input type="text" v-model="msg" />
    <input type="button" v-on:click="setName" value="点我" />
  </div>
</template>
<script>
  export default {
    name : 'Header',
    data(){
      return {
        msg : ''
      }
    },
    methods : {
      setName(){
        this.$store.state.userName = this.msg;
      }
    }
  }
</script>

App.vue引入组件Header

App.vue代码如下:

<template>
 <div id="app">
  <Headerc></Headerc>
  <Mainc></Mainc>
 </div>
</template>

<script>
import Headerc from './components/Header.vue';
import Mainc from './components/Main.vue';
export default {
 name: 'app',
 components : {
  Headerc,
  Mainc
 }
}
</script>

当我点击按钮的时候,改变state中useName的值,Main组件中的state.userName的值也会跟着更新,这种改变方式很好理解,接下来我们看下vuex推荐的状态改变方式

六、vuex推荐的状态改变方法

在store.js中新建一个mutations,存放被修改的状态

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
 state: {
  userName : 'ghostwu'
 },
 mutations : {
  showUserName( state, msg ){
   state.userName = msg;
  }
 }
})

export default store

其中第一个参数 state 就是 $store.state,第二个参数 msg 需要另外传入,这个参数我们通过Header.vue的点击事件中的方法来传递

Header.vue代码:

<template>
  <div>
    <input type="text" v-model="msg" />
    <input type="button" v-on:click="setName" value="点我" />
  </div>
</template>
<script>
  export default {
    name : 'Header',
    data(){
      return {
        msg : ''
      }
    },
    methods : {
      setName(){
        this.$store.commit( 'showUserName', this.msg );
      }
    }
  }
</script>

$store.commit 把this.msg的值提交给showUserName。state就收到了改变的状态了,这就是一个vuex最基本的用法和作用

以上这篇Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript常用小技巧小结
Dec 29 Javascript
JS实现超炫网页烟花动画效果的方法
Mar 02 Javascript
javascript比较两个日期相差天数的方法
Jul 23 Javascript
jQuery实现类似标签风格的导航菜单效果代码
Aug 25 Javascript
关于javascript中dataset的问题小结
Nov 16 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
Vue 2.x教程之基础API
Mar 06 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
May 08 Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
May 10 Javascript
你不知道的 TypeScript 高级类型(小结)
Aug 28 Javascript
Promise静态四兄弟实现示例详解
Jul 07 Javascript
angular4模块中给标签添加背景图的实现方法
Sep 15 #Javascript
基于Vue生产环境部署详解
Sep 15 #Javascript
基于Vue单文件组件详解
Sep 15 #Javascript
json2.js 入门教程之使用方法与实例分析
Sep 14 #Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
Sep 14 #Javascript
iframe与主框架跨域相互访问实现方法
Sep 14 #Javascript
VsCode插件整理(小结)
Sep 14 #Javascript
You might like
php 正则匹配函数体
2009/08/25 PHP
基于php中使用excel的简单介绍
2013/08/02 PHP
php中文验证码实现方法
2015/06/18 PHP
PHP判断是否连接上网络的方法
2015/07/01 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
清除div下面的所有标签的方法
2014/02/17 Javascript
jquery 表格排序、实时搜索表格内容(附图)
2014/05/19 Javascript
javascript实现当前页导航激活的方法
2015/02/27 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
基于js中的原型、继承的一些想法
2016/08/10 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
2016/08/11 Javascript
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
jfinal与bootstrap的登出实战详解
2017/11/27 Javascript
在Vue 中使用Typescript的示例代码
2018/09/10 Javascript
Angular设置别名alias的方法
2018/11/08 Javascript
JavaScript使用类似break机制中断forEach循环的方法
2018/11/13 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
2021/01/26 Javascript
[17:45]DOTA2 HEROES教学视频教你分分钟做大人-军团指挥官
2014/06/11 DOTA
python使用urllib模块开发的多线程豆瓣小站mp3下载器
2014/01/16 Python
Python通过matplotlib绘制动画简单实例
2017/12/13 Python
Python利用Django如何写restful api接口详解
2018/06/08 Python
Python+Selenium使用Page Object实现页面自动化测试
2019/07/14 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
python 3.74 运行import numpy as np 报错lib\site-packages\numpy\__init__.py
2019/10/06 Python
python 实现return返回多个值
2019/11/19 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
80年代复古T恤:TruffleShuffle
2018/07/02 全球购物
Oracle里面常用的数据字典有哪些
2014/02/14 面试题
活动总结的格式
2014/05/07 职场文书
机械电子工程专业自荐书
2014/06/10 职场文书
小班下学期个人总结
2015/02/12 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
java executor包参数处理功能 
2022/02/15 Java/Android