老规矩先安装

npm install vuex --save

在看下面内容之前 你应该大概的看了一边vuex官方的文档对vuex有个大概对了解

首先

vuex 是什么?

vuex 是属于vue中的什么,它在项目中扮演着一个什么样的角色,起到什么作用,在项目中我是否要用到vuex。

官方文档对vuex的解读是:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

如果你是在开发一个大型的应用程序,组件与组件之间,兄弟组件之间,或者说多层嵌套组件之间,你是无法传递数据的。子父组件之间,也只是说通过事件保持数据的一致性,也是很繁琐的,会变得很不好管理。而vuex就是为了解决这样的问题,把组件的共享状态抽取出来,以一个全局单例模式管理。组件树构成了一个巨大的“视图”,不管在树的哪个位置,任何组件都能获取状态或者触发行为,而且代码将会变得更结构化且易维护。

新建一个最简单的store

store.js

import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({
state: {
count: 0,
me: {
name: 'huangenai',
age: 22,
sex: '女'
},
      list: [{name: 'hea', age: 22}, {name: 'cpq', age: 23}]
  },
mutations: {
increment (state) {
state.count++
}
}
})

main.js

import store from './store.js'

new Vue({
el: '#app',
router,
store,//加这个
components: { App },
template: '<App/>'
})

State

驱动应用的数据源,组件之间共享的状态。

上面代码中的 count 就是一个共享的数据,me 也是一个共享的数据对象。

在组件中获得state 中的count

this.$store.state.count

newvue.vue

<template>
<div>
new vue page
<p>{{count}}</p>
</div>
</template> <script>
export default {
name: 'newvue',
data () {
return {
}
},
computed: {
count () {
return this.$store.state.count
}
}
}
</script> <style scoped>
</style>

为什么要写在computed 里面呢,而不是写在data里面,因为当state.count 变化的时候, 都会重新求取计算属性,并且触发更新相关联的 DOM,如果你不理解可以先去看看computed

当一个组件要引用到多个状态的时候 ,一个个写是不是很累。不用担心,我们有mapState 辅助函数帮助我们生成计算属性。

在组件中引用

import { mapState } from 'vuex'
<template>
<div>
<p>{{count}}</p>
<p>{{countPlusLocalState}}</p>
<p>sex: {{sex}}</p>
<p>age: {{myAge}}</p>
<p>name: {{name}}</p>
</div>
</template> <script>
import { mapState } from 'vuex'
export default {
name: 'newvue',
data () {
return {
localCount: 1
}
},
computed: {
...mapState({
// 箭头函数可使代码更简练
sex: state => state.me.sex,
myAge: state => state.me.age,
name: state => state.me.name,
// 传字符串参数 'age' 等同于 `state => state.age`
count: 'count',
// 为了能够使用 `this` 获取局部状态,必须使用常规函数
countPlusLocalState (state) {
return state.count + this.localCount
}
})
}
}
</script> <style scoped>
</style>

假设computed 里面还有别的数据,因为mapstate返回来的是一个对象所以我们这样写可以将数据混入

computed: {
localComputed () { /* ... */ },
// 使用对象展开运算符将此对象混入到外部对象中
...mapState({
// ...
})
}

Mutation

你说你想修改state的值,this.$store.state.count = 1 这样可不可以 no no no....  所以就有了Mutation。

切记Mutation 必须是同步函数!!!

想要修改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

在上面代码我们新建一个store里面下的 有一个increment,就可以实现修改state里面的count

export default new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count ++
}
}
})

那么如何调用increment呢??

调用 this.$store.commit(type)  类型叫increment 的 mutation。

this.$store.commit('increment')

我们还可以传入参数

// ...
mutations: {
increment (state, n) {
this.$state.count = n
}
}

store.commit('increment', 10)

传入一个对象

mutations: {
increment (state, data) {
state.count += data.count
}
}
store.commit('increment', {
count: 10
})

mutations可以修改store中的状态,但是并不是说随随便便修改的,比如说

vue 项目实战 (vue全家桶之--- vuex)的更多相关文章

  1. vue项目实战

    本篇文章主要介绍了vue的环境配置,vue项目的目录结构以及在开发vue项目中问题的一些解决方案. 环境配置及目录结构 1.安装node.js(http://www.runoob.com/nodejs ...

  2. webpack+vue项目实战(四,前端与后端的数据交互和前端展示数据)

    地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么 ...

  3. vue项目实战, webpack 配置流程记录

    vue项目实战记录,地址在这 购物车单界面 npm install npm run dev 跑起来可以看到界面效果 这里简单记录一下webpack的编译流程 入口 package.json " ...

  4. vue移动端开发全家桶

     一句命令搞定全家桶:  npm install vue-router vue-resource vuex --save  main.js配置: import Vue from 'vue' impor ...

  5. Vue 项目实战系列 (三)

    我们继续前两节的开发.本节教程实现的效果如下: 效果很简单,但是实现起来却要用到Vue的很多知识,下面我们将一步一步的实现这个效果. 首先这些城市的信息都是从后台的server里面获取的,所以我们需要 ...

  6. vue项目实战总结

    马上过年了,最近工作不太忙,再加上本人最近比较懒,毫无斗志,不愿学习新东西,或许是要过年的缘故(感觉像是在找接口). 就把前一段时间做过的vue项目,进行一次完整的总结. 这次算是详细总结,会从项目的 ...

  7. vue 项目实战 (入门)

    环境搭建 安装NodeJS →箭头https://nodejs.org/en/ NPM是随同NodeJS一起安装的包管理工具. 检查环境是否安装成功: 打开一个命令提示符,有成功输出版本号则为安装成功 ...

  8. vue项目实战经验汇总

    目录 1.vue框架使用注意事项和经验 1.1 解决Vue动态路由参数变化,页面数据不更新 1.2 vue组件里定时器销毁问题 1.3 vue实现按需加载组件的两种方式 1.4 组件之间,父子组件之间 ...

  9. Vue 项目实战系列 (一)

    最近一直在学习Vue,基本的文档看完后就需要进行具体的项目进行练手了,本系列文章主要是将我学习过程记录下来,和大家一起学习交流. 我在git上找到了一个淘票票的Vue项目,项目地址: https:// ...

随机推荐

  1. cerr与cout区别

    语言:C++ 一.简介 平常常会用的主要有三个:cout.cerr.clog,首先简单介绍下三者. 这三者在C++中都是标准IO库中提供的输出工具(至于有关的重载问题在此不讨论): cout:写到标准 ...

  2. 死锁问题------------------------INSERT ... ON DUPLICATE KEY UPDATE*(转)

    前言    我们在实际业务场景中,经常会有一个这样的需求,插入某条记录,如果已经存在了则更新它如果更新日期或者某些列上的累加操作等,我们肯定会想到使用INSERT ... ON DUPLICATE K ...

  3. 常见的js dom操作

    1.查找  document.getElementById('id属性值');  返回拥有指定id的第一个对象的引用  document/element.getElementsByClassName( ...

  4. boost--文件、目录操作

    filesystem库是文件系统操作库,可以使用其中的basic_path类用来操作目录.文件,使用需要包含编译好的system库和filesystem库,我们一般不直接使用basic_path,而是 ...

  5. Redis各种数据类型的应用场景

    redis是一种key values形式的非关系型数据库,通过内存存储,也可以把数据持久化到本地文件中. redis支持丰富的数据类型,String,list,set,zset,hash,下面说一下各 ...

  6. drools规则引擎中易混淆语法分析_相互触发导致死循环分析

    整理了下最近在项目中使用drools出现的问题,幸好都在开发与测试阶段解决了,未波及到prod. 首先看这样两条规则: /** * 规则1_set默认利率a */ rule "rate_de ...

  7. SVN服务端和客户端的安装与搭建

    版权声明:本文为博主原创文章,转载请注明原文出处. https://blog.csdn.net/zzfenglin/article/details/50931462 SVN简介 SVN全名Subver ...

  8. Java 包与类的命名(util、service、tool、dao )区别

    util 通用的.与业务无关的,可以独立出来,可供其他项目使用.方法通常是public static,一般无类的属性,如果有,也是public static. service 与某一个业务有关,不是通 ...

  9. Windows7+IIS+PHP7+MySQL5.7环境搭建

    IIS配置 本次搭建使用的系统是Windows7,Windows8,10与此类似. 开启IIS 开始-->控制面板-->程序和功能,点击左边栏的开启或关闭Windows功能,如图: 选择I ...

  10. react-eslintrc

    { "extends": ["eslint:recommended"], "plugins": [ "react" ], ...