VScode文件目录：

amount.vue代码如下：
<template>

  <div>

    <!-- <h3>{{ $store.state.count }}</h3> -->

    <h3>{{ $store.getters.optCount }}</h3>

  </div>

</template>

<script>

</script>

<style lang="scss" scoped>

</style>

counter.vue代码如下：

<template>

  <div>

    <input type="button" value="减少" @click="remove">

    <input type="button" value="增加" @click="add">

    <br>

    <input type="text" v-model="$store.state.count">

  </div>

</template>

<script>

export default {

  data() {

    return {

      // count: 0

    };

  },

  methods: {

    add() {

      // 千万不要这么用，不符合 vuex 的设计理念

      // this.$store.state.count++;

      this.$store.commit("increment");

    },

    remove() {

      this.$store.commit("subtract", { c: 3, d: 1 });

    }

  },

  computed:{

    fullname: {

      get(){},

      set(){}

    }

  }

};

</script>

<style lang="scss" scoped>

</style>

App.vue代码如下：

<template>

  <div>

    <h1>这是 App 组件</h1>

    <hr>

    <counter></counter>

    <hr>

    <amount></amount>

  </div>

</template>

<script>

import counter from "./components/counter.vue";

import amount from "./components/amount.vue";

export default {

  data() {

    return {};

  },

  components: {

    counter,

    amount

  }

};

</script>

<style lang="scss" scoped>

</style>

index.html代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <!-- 这是容器 -->

  <div id="app"></div>

</body>

</html>

main.js代码如下：

// 入口文件

import Vue from 'vue'

// 配置vuex的步骤

// 1. 运行 cnpm i vuex -S

// 2. 导入包

import Vuex from 'vuex'

// 3. 注册vuex到vue中

Vue.use(Vuex)

// 4. new Vuex.Store() 实例，得到一个 数据仓储对象

var store = new Vuex.Store({

  state: {

    // 大家可以把 state 想象成 组件中的 data ,专门用来存储数据的

    // 如果在 组件中，想要访问，store 中的数据，只能通过 this.$store.state.*** 来访问

    count: 0

  },

  mutations: {

    // 注意： 如果要操作 store 中的 state 值，只能通过 调用 mutations 提供的方法，才能操作对应的数据，不推荐直接操作 state 中的数据，因为 万一导致了数据的紊乱，不能快速定位到错误的原因，因为，每个组件都可能有操作数据的方法；

    increment(state) {

      state.count++

    },

    // 注意： 如果组件想要调用 mutations 中的方法，只能使用 this.$store.commit('方法名')

    // 这种 调用 mutations 方法的格式，和 this.$emit('父组件中方法名')

    subtract(state, obj) {

      // 注意： mutations 的 函数参数列表中，最多支持两个参数，其中，参数1： 是 state 状态； 参数2： 通过 commit 提交过来的参数；

      console.log(obj)

      state.count -= (obj.c + obj.d)

    }

  },

  getters: {

    // 注意：这里的 getters， 只负责 对外提供数据，不负责 修改数据，如果想要修改 state 中的数据，请 去找 mutations

    optCount: function (state) {

      return '当前最新的count值是：' + state.count

    }

    // 经过咱们回顾对比，发现 getters 中的方法， 和组件中的过滤器比较类似，因为 过滤器和 getters 都没有修改原数据， 都是把原数据做了一层包装，提供给了 调用者；

    // 其次， getters 也和 computed 比较像， 只要 state 中的数据发生变化了，那么，如果 getters 正好也引用了这个数据，那么 就会立即触发 getters 的重新求值；

  }

})

// 总结：

// 1. state中的数据，不能直接修改，如果想要修改，必须通过 mutations

// 2. 如果组件想要直接 从 state 上获取数据： 需要 this.$store.state.***

// 3. 如果 组件，想要修改数据，必须使用 mutations 提供的方法，需要通过 this.$store.commit('方法的名称'， 唯一的一个参数)

// 4. 如果 store 中 state 上的数据， 在对外提供的时候，需要做一层包装，那么 ，推荐使用 getters, 如果需要使用 getters ,则用 this.$store.getters.***

import App from './App.vue'

const vm = new Vue({

  el: '#app',

  render: c => c(App),

  store // 5. 将 vuex 创建的 store 挂载到 VM 实例上， 只要挂载到了 vm 上，任何组件都能使用 store 来存取数据

})

源代码下载

Vuex.js状态管理共享数据 - day8的更多相关文章

  1. 理解vuex的状态管理模式架构

    理解vuex的状态管理模式架构 一: 什么是vuex?官方解释如下:vuex是一个专为vue.js应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证以一种可预测的 ...

  2. Vuex，状态管理模式

    对于 Vue 本人目前接触不深,只得浅层分析,Vue 是单向数据流, state,驱动应用的数据源: view,以声明方式将 state 映射到视图: actions,响应在 view 上的用户输入导 ...

  3. Vue.js状态管理模式 Vuex

    vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 安装.使用 vuex 首先我们在 vue. ...

  4. Vuex实现状态管理

    Vuex使用总结 1 Vuex简介 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,Vuex抽取了各个组件的共享部分,以全局单例模式进行状态的管理.在原生vue中各个组件之间传值使用的 ...

  5. vuex vue状态管理

    第一步安装vuex(安装在生产环境) npm install vuex 第二步 src下新建store文件夹 用来专门放状态管理,store文件夹下新建四个js文件 index.js  actions ...

  6. vue2.0 仿手机新闻站（三）通过 vuex 进行状态管理

    1.创建 store 结构 2.main.js  引入 vuex 3. App.vue  组件使用 vuex <template> <div id="app"&g ...

  7. vuex的状态管理模式

    1.store.js Vuex 通过 store 选项,提供了一种机制将状态从根组件“注入”到每一个子组件中(需调用 Vue.use(Vuex)) state:存放数据. mutations:提交状态 ...

  8. vue+vuex+axios从后台获取数据存入vuex，组件之间共享数据

    在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今天这边博文用来记录这一整个的过程,后台api接口是使用webpack-se ...

  9. 举个例子去理解vuex（状态管理），通俗理解vuex原理，通过vue例子类比

    通俗理解vuex原理---通过vue例子类比   本文主要通过简单的理解来解释下vuex的基本流程,而这也是vuex难点之一. 首先我们先了解下vuex的作用vuex其实是集中的数据管理仓库,相当于数 ...

随机推荐

  1. su 和sudo 命令

    一. 使用 su 命令临时切换用户身份 1.su 的适用条件和威力 su命令就是切换用户的工具,怎么理解呢?比如我们以普通用户beinan登录的,但要添加用户任务,执行useradd ,beinan用 ...

  2. Linux系统启动全过程

    分为两部分,第一部分是硬件本身需要加载的信息,之后才是加载Linux相关信息,因为有装有双系统的机器嘛 1.计算机加电 2.BIOS开始运行,检测硬件:cpu.内存.硬盘等 3.BIOS读取CMOS存 ...

  3. 4月超棒的JavaScript游戏开发框架推荐(1) – 51CTO.COM

    基于JavaScript开发的游戏是唯一一个能够跨桌面,Web和移动三种平台的.… 查阅全文 ›

  4. Using MultiPath TCP to enhance home networks

    Over the last few months I’ve been playing with MultiPath TCP and in this post I will show how I use ...

  5. Tomcat自定义classLoader加密解密

    class很好反编译,所以需要对class文件先进行加密,然后使用自己的classloader进行解密并加载. [步骤] 大概分两步: 1.对class文件进行加密 2.写解密class文件并加载的c ...

  6. 13.详解oauth2授权码流程

    13.详解oauth2授权码流程 把登陆系统单独独立出来,可以给自己写的微服务用,也可以给第三方的系统调用我们的服务 显式的和隐式的,两种方式,

  7. html css鼠标样式，鼠标形状

    css鼠标手型cursor中hand与pointer Example:CSS鼠标手型效果 <a href="#" style="cursor:hand"& ...

  8. E20190308-hm

    sweep vt. 扫除; 打扫,清理; 彻底搜索; 掠过; vi. 打扫; 扫过; 蜿蜒; 大范围伸展; n. 打扫; 延伸; 挥动; 全胜;

  9. Ogre 学习记录

    http://www.cppblog.com/richardhe/articles/55722.html 1: 设计初衷 它设计初衷是完全跨平台的.抽象的接口隐藏了平台相关的细节. 它设计初衷是大幅度 ...

  10. [Noip模拟题]统计方案​

    题目并不难,想一下就会了,我真的智商持续下降,取模情况下做除法我都没想到逆元. 总之想到逆元就好写了,还是\(meet\ in\ the\ middle\)裸题,数组开不下用\(hash/map\)存 ...