Vuex 的核心是 store, 它是一个通过 Vuex.Store 构造函数生成的对象。为什么它会是核心呢?因为我们调用这个构造函数创建store 对象的时候,给它传递参数中包装了state, mutation , action 等核心内容。看一下官网的例子

const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})

  Vuex 的思想是 当我们在页面上点击一个按钮,它会处发(dispatch)一个action, action 随后会执行(commit)一个mutation, mutation 立即会改变state,  state 改变以后,我们的页面会state 获取数据,页面发生了变化。 Store 对象,包含了我们谈到的所有内容,action, state, mutation,所以是核心了。

  state:  When we say state we are talking about a group of dozens of variables to store data, 就是我们页面中用到的各种变量。在写vue 页面中,我们经常写 {{mes}}, mes 就是一个状态,因为它变化,页面就会重新渲染,页面也会发生改变,改变就意状态改变了。

  写一个简单的小项目体验一下, 这里用vue-cli webpack-simple

    1, vue init webpack-simple count, count 是项目文件名。

2,cd count  &&  cnpm install  &&  npm run dev, 可以看到大的vue logo ,证明项目启动成功。

3,webpack-simple默认没有安装vuex, 所以要安装vuex; 在命令行中按两次ctrl+c 结束服务器,cnpm install  vuex –save  安装vuex.

4, 打开app.vue,删除掉除图片在内的所有内容。

5,在src 目录下新建一个display.vue 组件,用于展示;新建一个increment 组件进行操作。

  display.vue:

<template>
<div>
<h3>Count is 0</h3>
</div>
</template> <script> </script> <style scoped>
h3 {
font-size: 30px;
}
</style>

  increment.vue

<template>
<div>
<button>+1</button>
<button>-1</button>
</div>
</template> <script> </script> <style scoped>
button {
width: 100px;
height: 100px;
font-size: 30px;
}
</style>

app.vue

<template>
<div id="app">
<img src="./assets/logo.png">
<display></display>
<increment></increment>
</div>
</template> <script>
import display from "./display.vue";
import increment from "./increment.vue"; export default {
data () {
return { }
},
components: {
display,
increment
}
}
</script> <style>
#app {
text-align: center;
}
</style>

项目很简单,就是单击按钮+-1. 可以想到,我们这个项目中只有一个变量,就是count, 现在它是0.

   用vuex 进行状态管理,store 是vuex的核心,所以命名为store.js. 在src 目录下新建store.js 文件(如下)。可以看到使用vuex 之前,要告诉 vue 使用它,Vue.use(Vuex); 我们这里只有一个变量count 需要管理,所以在创建 store 对象的时候,给构造函数传参,state 下面只有一个count, 且初始化为0。

import Vue from "vue";
import Vuex from "vuex"; Vue.use(Vuex); const store = new Vuex.Store({
state: {
count:0
}
}) export default store

  现在所有的状态,也就是变量都放到了store.js中,那我们组件怎么才能获取到状态修值呢?这里有两个步骤需要操作

    1, vue 提供了注入机制,就是把我们的store 对象注入到根实例中。vue的根实例就是 new Vue  构造函数,然后在所有的子组件中,this.$store 来指向store 对象。在store.js 中,我们export store, 把store已经暴露出去了,new Vue() 在main.js中,所以直接在main.js 中引入store  并注入即可。

import Vue from 'vue'
import App from './App.vue' import store from "./store.js" // 引入store 对象 new Vue({
el: '#app',
store, // 注入到根实例中
render: h => h(App)
})

  2, 在子组件中,用computed 属性, computed 属性是根据它的依赖自动更新的。所以只要store中的state 发生变化,它就会自动变化。在display.vue 中作下面的更改, 子组件中 this.$store 就是指向store 对象。我们把 store.js 里面的count 变为8, 页面中就变为了8。

<template>
<div>
<h3>Count is {{count}}</h3>
</div>
</template> <script>
export default {
computed: {
count () {
return this.$store.state.count
}
}
}
</script>

  3, 通过computed属性可以获取到状态值,但是组件中每一个属性(如:count)都是函数,如果有10个,那么就要写10个函数,且重复写10遍return this.$store.state,不是很方便。vue 提供了 mapState 函数,它把state 直接映射到我们的组件中。

当然使用mapState 之前要先引入它。它两种用法,或接受一个对象,或接受一个数组。还是在display.vue 组件下。

  对象用法如下:

<script>
import {mapState} from "vuex"; // 引入mapState
export default {
      // 下面这两种写法都可以
computed: mapState({
count: state => state.count // 组件内的每一个属性函数都会获得一个默认参数state, 然后通过state 直接获取它的属性更简洁
count: 'count'         // 'count' 直接映射到state 对象中的count, 它相当于 this.$store.state.count,
})
}
</script>

  数组方式:上面的第二种方式count: 'count',还是有点麻烦,因为要写两遍。如果我们组件中的属性和state 中的属性名称一样,我们不想改名字,那就把直接把属性名写在数组中。

<script>
import {mapState} from "vuex";
export default {
computed: mapState([ // 数组
"count"
])
}
</script>

  4,  还有最后一个问题,如果我们组件内部也有computed 属性怎么办?它又不属于mapState 中。那就用到了对象分割,把mapState函数生成的对象再分割成一个个的,就像最开始的时候,我们一个一个罗列计算属性,有10个属性,我们就写10个函数。

es6中的... 就是分割用的,但是只能分割数组。在ECMAScript stage-3 阶段它可以分割对象,所以这时还要用到babel-stage-3;  npm install babel-preset-stage-3 --save-dev, 安装完全后,一定不要忘记在babelrc 就是babel 的配置文件中,写入stage-3,

否则一直报错。在页面中添加个 p 标签,显示我们组件的计算熟悉

babelrc

{
"presets": [
["env", {
"es2015": { "modules": false }
}],
"stage-3" // 一定不要忘记
]
}

display.vue 组件更改后

<template>
<div>
<h3>Count is {{count}}</h3>
<p>组件自己的内部计算属性 {{ localComputed }}</p>
</div>
</template> <script>
import {mapState} from "vuex";
export default {
computed: {
localComputed () {
return this.count + 10;
},
...mapState({
count: "count"
})
}
}
</script>

把store.js 中state.count 改为20,  查看一个效果

【13】vuex2.0 之 state的更多相关文章

  1. vuex2.0.0爬坑记录 -- mutations的第一个参数state不能解构

    今天在学习vuex的过程中,遇到了一个很困扰人的问题,最终利用vuex的状态快照工具logger解决了问题. 问题是这样的,我在子组件中使用了mapState()函数来将状态映射至子组件中,使子组件能 ...

  2. Vuex2.0+Vue2.0构建备忘录应用实践

    一.介绍Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,适合于构建中大型单页应用. ...

  3. vuex2.0+两个小例子

    首先vuex概念比较多,一定要搞懂里面的概念,可以参考官网Vuex2.0概念,我写此文的目的是希望能对前端爱好者提供个参考,加深对vuex2.0各核心概念的理解. 废话少说,直接上干货.这是官网上的一 ...

  4. Vuex2.0边学边记+两个小例子

    最近在研究Vuex2.0,搞了好几天终于有点头绪了. 首先vuex概念比较多,一定要搞懂里面的概念,可以参考官网Vuex2.0概念,我写此文的目的是希望能对前端爱好者提供个参考,加深对vuex2.0各 ...

  5. cAdvisor0.24.1+InfluxDB0.13+Grafana4.0.2搭建Docker1.12.3 Swarm集群性能监控平台

    目录 [TOC] 1.基本概念 ​ 既然是对Docker的容器进行监控,我们就不自己单独搭建cAdvisor.InfluxDB.Grarana了,本文中这三个实例,主要以Docker容器方式运行. 本 ...

  6. Ubuntu14.04 64位机上安装OpenCV2.4.13(CUDA8.0)版操作步骤

    Ubuntu14.04 64位机上安装CUDA8.0的操作步骤可以参考http://blog.csdn.net/fengbingchun/article/details/53840684,这里是在已经 ...

  7. vuex2.0 基本使用(1) --- state

    Vuex 的核心是 store, 它是一个通过 Vuex.Store 构造函数生成的对象.为什么它会是核心呢?因为我们调用这个构造函数创建store 对象的时候,给它传递参数中包装了state, mu ...

  8. (转)vuex2.0 基本使用(1) --- state

    Vuex 的核心是 store, 它是一个通过 Vuex.Store 构造函数生成的对象.为什么它会是核心呢?因为我们调用这个构造函数创建store 对象的时候,给它传递参数中包装了state, mu ...

  9. vuex2.0 基本使用(3) --- getter

    有的组件中获取到 store 中的state,  需要对进行加工才能使用,computed 属性中就需要写操作函数,如果有多个组件中都需要进行这个操作,那么在各个组件中都写相同的函数,那就非常麻烦,这 ...

随机推荐

  1. C#装箱与拆箱的研究

    在对这个问题展开讨论之前,我们不妨先来问这么几个问题,以系统的了解我们今天要探究的主题. 观者也许曾无数次的使用过诸如System.Console类或.NET类库中那些品种繁多的类.那么,我想问的是它 ...

  2. pycharm永久激活记录

    由于上一年安装的pycharm激活时是用的激活码,有期限的,一直到今年5月4日过期,这两天顺便把版本也更新到最新,一直用的free版,到今天提醒我free快到期了,所以才狠下心来去找解决方案,目前已经 ...

  3. (77)zabbix主动、被动检测的详细过程与区别

    zabbix agent检测分为主动(agent active)和被动(agent)两种形式,主动与被动的说法均是相对于agent来讨论的.简单说明一下主动与被动的区别如下: 主动:agent请求se ...

  4. webpack的配置处理

    1.webpack对脚本的处理 1.Js用什么loader加载? 1>webpack 本身就支持js的加载, 2>通过babel-loader ES2015 加载js,再用 babel-p ...

  5. HihoCoder - 1636 Pangu and Stones(区间DP)

    有n堆石子,每次你可以把相邻的最少L堆,最多R堆合并成一堆. 问把所有石子合并成一堆石子的最少花费是多少. 如果不能合并,输出0. 石子合并的变种问题. 用dp[l][r][k]表示将 l 到 r 之 ...

  6. Keepalivaed +Nginx proxy 高可用架构方案与实施过程细节

    1.开源产品介绍 1)CMS介绍 官方网站http://www.dedecms.com/,是一个网站应用系统构建平台,也是一个强大的网站内容管理系统,既可以用来构建复杂的体系的企业信息门户或者电子商务 ...

  7. Diycode开源项目 NotificationActivity

    1.NotificationActivity预览以及布局详解 1.1.首先看一下通知的具体页面. 1.2.然后是布局代码==>activity_fragment.xml <LinearLa ...

  8. IOS开发学习笔记009-OC基本知识

    开始学习OC,时间不等人啊,要抓紧了. OC基本知识 新建一个以.m结尾的文件,这既是oc的程序文件.在oc程序中完全兼容C语言.编译好链接类似. oc包含头文件是使用#import <> ...

  9. Leetcode 491.递增子序列

    递增子序列 给定一个整型数组, 你的任务是找到所有该数组的递增子序列,递增子序列的长度至少是2. 示例: 输入: [4, 6, 7, 7] 输出: [[4, 6], [4, 7], [4, 6, 7] ...

  10. 实用拜占庭容错算法PBFT

    实用拜占庭容错算法PBFT 实用拜占庭容错算法PBFT 96 乔延宏 2017.06.19 22:58* 字数 1699 阅读 4972评论 0喜欢 11 分布式架构遭遇的问题 分布式架构会遭遇到以下 ...