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 相关文章推荐
学习ExtJS border布局
Oct 08 Javascript
jquery $(this).attr $(this).val方法使用介绍
Oct 08 Javascript
JavaScript实现多种排序算法
Feb 24 Javascript
浅谈JS使用[ ]来访问对象属性
Sep 21 Javascript
jQuery弹出div层过2秒自动消失
Nov 29 Javascript
Windows下Node.js安装及环境配置方法
Sep 18 Javascript
AngularJS遍历获取数组元素的方法示例
Nov 11 Javascript
浅谈Angular文字折叠展开组件的原理分析
Nov 24 Javascript
Webpack中publicPath路径问题详解
May 03 Javascript
如何实现一个webpack模块解析器
Oct 24 Javascript
vue实现双向绑定和依赖收集遇到的坑
Nov 29 Javascript
Node.js事件的正确使用方法
Apr 05 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下封装较好的数字分页方法
2010/11/23 PHP
php curl的深入解析
2013/06/02 PHP
免费的ip数据库淘宝IP地址库简介和PHP调用实例
2014/04/08 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
详解PHP用substr函数截取字符串中的某部分
2016/12/03 PHP
PHP日志LOG类定义与用法示例
2018/09/06 PHP
用javascript获取textarea中的光标位置
2008/05/06 Javascript
js 小数取整的函数
2010/05/10 Javascript
jQuery实现用户注册的表单验证示例
2013/08/28 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
javascript模拟php函数in_array
2015/04/27 Javascript
javascript检测两个数组是否相似
2015/05/19 Javascript
AspNet中使用JQuery上传插件Uploadify详解
2015/05/20 Javascript
浅谈JavaScript 数据属性和访问器属性
2016/09/01 Javascript
JS正则子匹配实例分析
2016/12/22 Javascript
jQuery实现frame之间互通的方法
2017/06/26 jQuery
一个Vue页面的内存泄露分析详解
2018/06/25 Javascript
vue select选择框数据变化监听方法
2018/08/24 Javascript
记一次webapck4 配置文件无效的解决历程
2018/09/19 Javascript
[01:19]DOTA2城市挑战赛报名开始 开启你的城市传奇
2018/03/23 DOTA
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
Pycharm学习教程(3) 代码运行调试
2017/05/03 Python
简单实现Python爬取网络图片
2018/04/01 Python
Python HTTP下载文件并显示下载进度条功能的实现
2020/04/02 Python
python爬虫基础知识点整理
2020/06/02 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
python实现图片转字符画的完整代码
2021/02/21 Python
详解HTML5通讯录获取指定多个人的信息
2016/12/20 HTML / CSS
业绩考核岗位职责
2014/02/01 职场文书
导师评语大全
2014/04/26 职场文书
标准单位租车协议书
2014/09/23 职场文书
英文感谢信范文
2015/01/21 职场文书
起诉书范文
2015/05/20 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
TV动画《间谍过家家》公开PV
2022/03/20 日漫