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显示随机图像或引用
Apr 21 Javascript
如何高效率去掉js数组中的重复项
Apr 12 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
Oct 13 Javascript
ASP.NET jquery ajax传递参数的实例
Nov 02 Javascript
打字效果动画的4种实现方法(超简单)
Oct 18 Javascript
vue的diff算法知识点总结
Mar 29 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
May 04 Javascript
使用Vue自定义指令实现Select组件
May 24 Javascript
node获取客户端ip功能简单示例
Aug 24 Javascript
layui table 列宽百分比显示的实现方法
Sep 28 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
Sep 28 Javascript
微信小程序APP的生命周期及页面的生命周期
Apr 19 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中的cookie不用刷新就生效的方法
2012/02/04 PHP
PHP文件及文件夹操作之创建、删除、移动、复制
2016/07/13 PHP
PHP实现微信申请退款功能
2018/10/01 PHP
脚本吧 - 幻宇工作室用到js,超强推荐base.js
2006/12/23 Javascript
HTML颜色选择器实现代码
2010/11/23 Javascript
js下将字符串当函数执行的方法
2011/07/13 Javascript
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
2012/02/27 Javascript
javascript获取选中的文本的方法代码
2013/10/30 Javascript
JavaScript forEach()遍历函数使用及介绍
2015/07/08 Javascript
代码分析jQuery四种静态方法使用
2015/07/23 Javascript
JQuery入门基础小实例(1)
2015/09/17 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
认识less和webstrom的less配置方法
2017/08/02 Javascript
Angular中使用MathJax遇到的一些问题
2017/12/15 Javascript
微信小程序实现的动态设置导航栏标题功能示例
2019/01/31 Javascript
Vue表情输入组件 微信face表情组件
2019/02/11 Javascript
跟老齐学Python之不要红头文件(1)
2014/09/28 Python
Python3实现从指定路径查找文件的方法
2015/05/22 Python
怎样使用Python脚本日志功能
2016/08/14 Python
Django高并发负载均衡实现原理详解
2020/04/04 Python
python简单实现最大似然估计&amp;scipy库的使用详解
2020/04/15 Python
使用CSS3制作一个简单的进度条(demo)
2017/05/23 HTML / CSS
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
美国男士西装打折店:Jos. A. Bank
2017/11/13 全球购物
英国花园药房: The Garden Pharmacy
2017/12/28 全球购物
伦敦眼门票在线预订:London Eye
2018/05/31 全球购物
精灵市场:Pixie Market
2019/06/18 全球购物
写好自荐信的要点
2013/11/06 职场文书
婚庆公司的创业计划书
2014/01/22 职场文书
群众路线批评与自我批评
2014/02/06 职场文书
文化宣传方案
2014/03/13 职场文书
幼儿园新年寄语
2014/04/03 职场文书
2014年妇联工作总结
2014/11/21 职场文书
JavaScript 对象创建的3种方法
2021/11/17 Javascript
彻底卸载VMware虚拟机的超详细步骤记录
2022/07/15 Servers