Vuex.js状态管理共享数据 - day8
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的更多相关文章
- 理解vuex的状态管理模式架构
理解vuex的状态管理模式架构 一: 什么是vuex?官方解释如下:vuex是一个专为vue.js应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证以一种可预测的 ...
- Vuex，状态管理模式
对于 Vue 本人目前接触不深,只得浅层分析,Vue 是单向数据流, state,驱动应用的数据源: view,以声明方式将 state 映射到视图: actions,响应在 view 上的用户输入导 ...
- Vue.js状态管理模式 Vuex
vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 安装.使用 vuex 首先我们在 vue. ...
- Vuex实现状态管理
Vuex使用总结 1 Vuex简介 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,Vuex抽取了各个组件的共享部分,以全局单例模式进行状态的管理.在原生vue中各个组件之间传值使用的 ...
- vuex vue状态管理
第一步安装vuex(安装在生产环境) npm install vuex 第二步 src下新建store文件夹 用来专门放状态管理,store文件夹下新建四个js文件 index.js actions ...
- vue2.0 仿手机新闻站（三）通过 vuex 进行状态管理
1.创建 store 结构 2.main.js 引入 vuex 3. App.vue 组件使用 vuex <template> <div id="app"&g ...
- vuex的状态管理模式
1.store.js Vuex 通过 store 选项,提供了一种机制将状态从根组件“注入”到每一个子组件中(需调用 Vue.use(Vuex)) state:存放数据. mutations:提交状态 ...
- vue+vuex+axios从后台获取数据存入vuex，组件之间共享数据
在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今天这边博文用来记录这一整个的过程,后台api接口是使用webpack-se ...
- 举个例子去理解vuex（状态管理），通俗理解vuex原理，通过vue例子类比
通俗理解vuex原理---通过vue例子类比 本文主要通过简单的理解来解释下vuex的基本流程,而这也是vuex难点之一. 首先我们先了解下vuex的作用vuex其实是集中的数据管理仓库,相当于数 ...
随机推荐
- [ZJU 2112] Dynamic Rankings
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1901 [算法] 首先 , 考虑没有修改操作 不妨建立可持久化线段树 , 第i棵树维护 ...
- poj 2069 Super Star —— 模拟退火
题目:http://poj.org/problem?id=2069 仍是随机地模拟退火,然而却WA了: 看看网上的题解,都是另一种做法——向距离最远的点靠近: 于是也改成那样,竟然真的A了...感觉这 ...
- bzoj2718
二分图匹配 首先有个定理:最长反链=最小链覆盖 最小链覆盖可以重复经过点 所以我们不能直接建图 那么我们用floyd判断是否相连 然后建图就行了 #include<bits/stdc++.h&g ...
- [hdu2243]考研路茫茫——单词情结(AC自动机+矩阵快速幂)
题意:长度不超过L,只由小写字母组成的,至少包含一个词根的单词,一共可能有多少个. 解题关键:利用补集转化的思想,先求一个词根也不包含的单词个数,然后用总的减去即可.长度不超过L需要用矩阵维数增加一倍 ...
- cf 424
Office Keys 首先显然有随人位置的递增,钥匙的位置也要递增,这样考虑两张做法: 1.$f(i,j)$ 表示前i个人,钥匙到第j个最少用的最大时间,然后$O(nK)$ dp 2.二分时间,对于 ...
- Bean的基于XML配置方式
基于XML配置 Beans.xml <?xml version="1.0" encoding="UTF-8" ?> <beans xmlns= ...
- .Net框架中的CLR，CTS，ClS的解释
CLR的全称(Common Language Runtime) 公共语言运行时 可以把它理解为包含运行.Net程序的引擎 和 一堆符合公用语言基础(CLI)的类库的集合,他是一个规范的实现,我们开发的 ...
- 第三篇：SpringBoot用JdbcTemplates访问Mysql
本文介绍springboot通过jdbc访问关系型mysql,通过spring的JdbcTemplate去访问. 准备工作 jdk 1.8 maven 3.0 idea mysql 初始化mysql: ...
- TypeScript完全解读(26课时)_1.TypeScript完全解读-开发环境搭建
1.TypeScript完全解读-开发环境搭建 初始化项目 手动创建文件夹 D:\MyDemos\tsDemo\client-demo 用VSCode打开 npm init:初始化项目 然后我们的项目 ...
- python 内置函数的补充 isinstance,issubclass, hasattr ,getattr, setattr, delattr,str,del 用法，以及元类
isinstance 是 python中的内置函数 , isinstance()用来判断一个函数是不是一个类型 issubclass 是python 中的内置函数, 用来一个类A是不是另外一个 ...