在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用  props 或者 $emit 等方式 http://www.cnblogs.com/wisewrong/p/6266038.html

但是如果是大型项目,很多时候都需要在子组件之间传递数据,使用之前的方式就不太方便。Vue 的状态管理工具 Vuex 完美的解决了这个问题。

一、安装并引入 Vuex

项目结构:

首先使用 npm 安装 Vuex

cnpm install vuex -S

然后在 main.js 中引入

import Vue from 'vue'
import App from './App'
import Vuex from 'vuex'
import store from './vuex/store'
Vue.use(Vuex)

/* eslint-disable no-new */
new Vue({
el: '#app',
store,
render: h => h(App)
})

二、构建核心仓库 store.js

Vuex 应用的状态 state 都应当存放在 store.js 里面,Vue 组件可以从 store.js 里面获取状态,可以把 store 通俗的理解为一个全局变量的仓库。

但是和单纯的全局变量又有一些区别,主要体现在当 store 中的状态发生改变时,相应的 vue 组件也会得到高效更新。

在 src 目录下创建一个 vuex 目录,将 store.js 放到 vuex 目录下

import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({
// 定义状态
state: {
author: 'Wise Wrong'
}
}) export default store

这是一个最简单的 store.js,里面只存放一个状态 author

虽然在 main.js 中已经引入了 Vue 和 Vuex,但是这里还得再引入一次

三、将状态映射到组件

<template>
<footer class="footer">
<ul>
<li v-for="lis in ul">{{lis.li}}</li>
</ul>
<p>
Copyright&nbsp;&copy;&nbsp;{{author}} - 2016 All rights reserved
</p>
</footer>
</template> <script>
export default {
name: 'footerDiv',
data () {
return {
ul: [
{ li: '琉璃之金' },
{ li: '朦胧之森' },
{ li: '缥缈之滔' },
{ li: '逍遥之火' },
{ li: '璀璨之沙' }
]
}
},
computed: {
author () {
return this.$store.state.author
}
}

}
</script>

这是 footer.vue 的 html 和 script 部分

主要在 computed 中,将 this.$store.state.author 的值返回给 html 中的 author

页面渲染之后,就能获取到 author 的值

四、在组件中修改状态

然后在 header.vue 中添加一个输入框,将输入框的值传给 store.js 中的 author

这里我使用了 Element-UI 作为样式框架

上面将输入框 input 的值绑定为 inputTxt,然后在后面的按钮 button 上绑定 click 事件,触发 setAuthor 方法

methods: {
 setAuthor: function () {
   this.$store.state.author = this.inpuTxt
 }
}

在 setAuthor 方法中,将输入框的值 inputTxt 赋给 Vuex 中的状态 author,从而实现子组件之间的数据传递

五、官方推荐的修改状态的方式

上面的示例是在 setAuthor 直接使用赋值的方式修改状态 author,但是 vue 官方推荐使用下面的方法:

首先在 store.js 中定义一个方法 newAuthor,其中第一个参数 state 就是 $store.state,第二个参数 msg 需要另外传入

然后修改 header.vue 中的 setAuthor 方法

这里使用 $store.commit 提交 newAuthor,并将 this.inputTxt 传给 msg,从而修改 author

这样显式地提交(commit) mutations,可以让我们更好的跟踪每一个状态的变化,所以在大型项目中,更推荐使用第二种方法。

Vue ---- Vuex 的第一次接触的更多相关文章

  1. Vue 爬坑之路(四)—— 与 Vuex 的第一次接触

    在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用  props 或者 $emit 等方式 http://www.cnblogs.com/wisewrong/p/62660 ...

  2. (转)Vue 爬坑之路(四)—— 与 Vuex 的第一次接触

    在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用  props 或者 $emit 等方式 http://www.cnblogs.com/wisewrong/p/62660 ...

  3. Vuex的第一次接触

    前言:最近在做Vue实现去哪网,想要实现在城市列表页面,点击某个城市的时候,主页的头部的城市会随着改变,就是首页和城市页面有共用的数据要分享,这里使用Vuex 1. Vuex是什么? 是Vue官方推荐 ...

  4. 我的音乐盒子(nodejs7 + koa2 + vue + vuex + vue-router)

    你们知道的,nodejs对jser来说,是个好东西,快快的,自从接触nodejs后,总想弄点东西. 这弄个啥了,一天打开百度音乐盒,哟,自己弄一个如何了,好啊好啊. 后台: nodejs 7 + ko ...

  5. 基于Vue+Vuex+Vue-Router+axios+mint-ui的移动端电商项目

    第一步:安装Node 1.打开NodeJS的官网,下载和自己系统相配的NodeJS的安装程序,包括32位还是64位一定要选择好,否则会出现安装问题. 下载地址:https://nodejs.org/e ...

  6. 第一次接触终极事务处理——Hekaton

    在这篇文章里,我想给出如何与终极事务处理(Extreme Transaction Processing (XTP) )的第一次接触,即大家熟知的Hakaton.如果你想对XTP有个很好的概况认识,我推 ...

  7. vue+vuex初入门

    Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 解决问题: 传参的方法对于多层嵌 ...

  8. use vue vuex vue-router, not use webpack

    vue,vuex,vue-router放在一起能做什么?不用webpack之类的打包工具使用他们是否可行?各位道友在初学vue时是否有这样的困惑.因为现代构建前端项目的一般模式是: 安装webapck ...

  9. [ABP开源项目]--vue+vuex+vue-router+EF的权限管理系统

    好久没写文字了,当然大家也不期待嘛,反正看代码就行了. 演示网站 首先说下这个项目吧. 如标题一样是基于VUE+.NET开发的框架,也是群友一直吼吼吼要一个vue版本的ABP框架. 我们先来看看首页吧 ...

随机推荐

  1. pyecharts v1 版本 学习笔记 柱状图

    柱状图 bar 基本演示例子 from pyecharts import options as opts from pyecharts.charts import Bar c =( Bar().add ...

  2. 数据分析相关学习 -1 numpy

    前情提要: 数据分析:把一些看似杂乱无章的数据背后的信息提炼出来,总结出所研究 对象的内在规律 数据分析的三剑客: numpy,pandas,matplotlb numpy是python语言的一个扩展 ...

  3. 011_9*9 乘法表(编写 shell 脚本,打印 9*9 乘法表)

    #!/bin/bashfor i in `seq 9`do    for j in `seq $i`        do           echo -n "$i*$j=$[i*j] &q ...

  4. java+批量下载文件到指定文件夹

    需求 导出文件后存留在了服务器中,需要提供下载按钮,点击后可下载到本地:(因为涉及多个文件,下载前先将文件进行压缩,提供下载压缩文件) 效果预览 代码 主要方法 /**     * 下载生成的所有在线 ...

  5. ipv4保留地址

    曾经以为保留地址下面三类.原来使用中还有很多的. A类 10.0.0.0--10.255.255.255 B类 172.16.0.0--172.31.255.255 C类 192.168.0.0--1 ...

  6. postgresql could not connect to server

    问题: postgresql部署在linux上,在自己电脑上使用pgadmin连接出现could not connect to server错误 问题分析: 出现上述原因有3种情况 1.linux上的 ...

  7. python线程+队列(queue)

    ---恢复内容开始--- python的线程学习 用处 pocpiliang脚本的编写 函数式:调用 _thread 模块中的start_new_thread()函数来产生新线程.语法如下: _thr ...

  8. 淘宝rem适配方案

    /*px 转化换 rem ,转化是 10 .比如:你的设计图为750,那么就 750 / 75 = 10 rem.设计图中你量尺寸都要除 75 就是 rem值.再比如量的设计图按钮宽度 66px,那么 ...

  9. 执行git pull时提示Connection reset by 13.229.188.59 port 22

    问题如下图: 解决办法: 1. 2. 3. 4. 5. 6.

  10. python笔记6 模块与包 程序开发规范 包 re sys time os模块

    模块与包 python 模块首引用加载到内存,如果再次引用此模块,直接从内存中读取. python文件分为:执行文件(解释器运行的文件),被引用文件(import) 模块引用一共发生了3件事: 1.他 ...