Vuex接触

转载 2018年04月16日 17:12:44

在 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,可以让我们更好的跟踪每一个状态的变化,所以在大型项目中,更推荐使用第二种方法。

Vuex初探之旅

Vuex是什么 关于Vuex是什么这个问题,官方给的答复案是:一个专为 Vue.js 应用程序开发的状态管理模式。所谓官方答案就等于标准答案,你能想得到的只能是参考答案。官方:你能想到?能看懂算我输...
  • lylwanan
  • lylwanan
  • 2017年03月14日 17:38
  • 928

Vuex简单入门

今天试了一下Vuex,感觉跟Redux的实现思想类似。再此,简单地总结一下。 什么是Vuex 在Vue中,多组件的开发给我们带来了很多的方便,但同时当项目规模变大的时候,多个组件间的数据通...
  • sinat_17775997
  • sinat_17775997
  • 2017年02月09日 09:36
  • 63878

最简单的Vuex示例

最简单的Vuex示例 学习Vuex,弄个最简单的例子备忘一下,mapGetters, mapActions, mapMutations, state都用到了。 1.老规矩,vue-cli脚手架来一...
  • tanmx219
  • tanmx219
  • 2017年11月20日 11:01
  • 445

Vuex(一)--为什么要使用Vuex

关于Vuex,可以看看官方文档-《Vuex 是什么?》。文档里面其实也说了为什么要使用Vuex。问题其实我们在工作中也经常遇见这种情况:一份数据需要在多个页面共享操作,同时保证同步。 开发过原生iO...
  • zhuming3834
  • zhuming3834
  • 2017年10月23日 17:05
  • 1745

vuex基本使用

今天试了一下Vuex,感觉跟Redux的实现思想类似。再此,简单地总结一下。 什么是Vuex 在Vue中,多组件的开发给我们带来了很多的方便,但同时当项目规模变大的时候,多个组件间的数据通信和状态...
  • osdfhv
  • osdfhv
  • 2018年01月16日 22:15
  • 295

深入理解vuex

创建一个基本的vuex流程 1、在项目中新建一个文件夹store 用来存入vuex创建的所有文件夹 文件夹中包函以下几块 文件名称 描述 store.js 定义初始变量,以及...
  • xtaydwxf1988
  • xtaydwxf1988
  • 2017年05月04日 16:20
  • 2231

Vue---使用vuex

Vue---使用vuex
  • TONELESS
  • TONELESS
  • 2017年05月11日 16:10
  • 6608

Vuex 快速入门

Vuex 快速入门基本用途: 将某些data变成组件间公用的状态,组件随时都可以进行访问和响应,解决了props传值的链式响应的代码冗余 给状态配以公用方法,使得 基本用法:/store/store....
  • TeckerYu
  • TeckerYu
  • 2017年02月07日 20:05
  • 7947

视频电商网站 - vuex多个module交互

我们的项目使用了Vuex,关于Vuex是什么看这里: http://vuex.vuejs.org/zh-cn/intro.htmlVuex里有个Modules的概念: http://vuex.vu...
  • github_26672553
  • github_26672553
  • 2017年05月02日 16:50
  • 3166

vuex的使用

vuex是vue中用来管理状态的一套解决方案,它提供一个数据中心,用以管理所有组件的状态,当应用中的组件越来越多,根据组件的通信机制,消息的传递会变得难以维护,且在视图渲染中出现问题,比如想象一下一个...
  • thatway_wp
  • thatway_wp
  • 2018年01月10日 15:56
  • 205
收藏助手
不良信息举报
您举报文章:Vuex接触
举报原因:
原因补充:

(最多只允许输入30个字)