vuex的state在组件选项data和computed上引用的区别
引用在vue组件的data选项，不因数值被改变而更新
引在在vue组件的computed选项，因数值变化而更组件
案例代码如下，调整下引用vue和vuex地址即可展示
<!DOCTYPE html>
<html>
<head>
<title> vuex的配置state,mutations 和vue组件调用及模板组件</title>
<script src="js/vue.js" type="text/javascript"></script>
<script src="js/vuex.js" type="text/javascript"></script> <meta charset="utf-8"/>
</head>
<body>
<div id="app">
{{msg}}
<!-- 此处渲染count来自vue组件，computed选项，随值改变而改变渲染 -->
<h3>{{count}}</h3>
<!-- 此处渲染count2来自vue组件data选项，不随值改变而改变渲染 -->
<h3>{{count2}}</h3>
<!-- 直接调用vuex的state选项，不推荐，推荐是computed引用后再洹染 -->
<h3>{{this.$store.state.count}}</h3>
<input type='button' value="clickme +" v-on:click='incrementCount'>
<hr/>
<!-- 组件名称有大小写，模板调用用短线隔开
如：studentV 转换成student-v -->
<student-v></student-v>
</div>
<script>
const store = new Vuex.Store({
state: {
count: 0,
student:'学生信息'
},
mutations: {
increment (state) {
state.count++
}
}
})
// 创建一个 student 组件
const studentV = {
template: `<div>{{ student }}</div>`,
computed: {
student () {
return store.state.student+" "+store.state.count
}
}
} var app=new Vue({
el:'#app',
data(){
return{
msg:'app.vue 组件',
count2:this.$store.state.count
}
},
store,
components:{studentV},
computed:{
count:function(state) {
return this.$store.state.count
}
},
methods:{
incrementCount:function(){
//引用 vuex下的mutations选项书写的函数
return this.$store.commit('increment')
}
} })
</script>
</body>
</html>
vuex的state在组件选项data和computed上引用的区别的更多相关文章
- 在vue组件中使用vuex的state状态对象的5种方式
下面是store文件夹下的state.js和index.js内容 //state.js const state = { headerBgOpacity:0, loginStatus:0, count: ...
- vuex的state选项rootState.js
说明:本文做为vuex学习详细解(主页目录 配置主页:vuex学习配置详解(目录rootState.js文件如下 作用声明 vuex的state选项常量,并导出默认为state /** * 此文件除声 ...
- day 87 Vue学习六之axios、vuex、脚手架中组件传值
本节目录 一 axios的使用 二 vuex的使用 三 组件传值 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 axios的使用 Axios 是一个基于 promise 的 HT ...
- Vuex基础-State
官方地址:https://vuex.vuejs.org/zh/guide/state.html 由于 Vuex 的状态存储是响应式的,从 store 实例中读取状态最简单的方法就是在计算属性中返回某个 ...
- vuex的state，mutation，getter，action
开始!正常的简单的拆分下是这样的文件当然module可以在store下面新建一个文件夹用来处理单独模块的vuex管理比较合适. 1.index.js下面 import Vue from 'vue' i ...
- day 84 Vue学习六之axios、vuex、脚手架中组件传值
Vue学习六之axios.vuex.脚手架中组件传值 本节目录 一 axios的使用 二 vuex的使用 三 组件传值 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 axios的 ...
- vuex之state(一)
我的理解 个人认为,不用说得太过深奥,vuex其实就是把一个应用的某些数据统一管理起来,以便其他的组件更方便的操作该数据. 为什么使用vuex 当项目结构越来越复杂,组件的多层嵌套使得数据传递非常繁琐 ...
- 关于vuex的数据不直接给data而要通过computed
# 为什么vuex的数据不直接给data而要通过computed计算 ## 疑惑 其实一直以来使用vue的状态管理vuex都有一个疑惑,文档中介绍,vue的状态数据`$store.state.xx`的 ...
- Vuex状态管理——任意组件间通信
核心概念 在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信. 每一个 Vuex 应用的 ...
随机推荐
- hash算法与拉链法解决冲突
<?php class HashNode { public $key; public $value; public $nextNode; public function __construct( ...
- 吐血推荐珍藏的IDEA插件
之前给大家推荐了一些我自己常用的VS Code插件,很多同学表示很受用,并私信我说要再推荐一些IDEA插件.作为一名职业Java程序员/业余js开发者,我平时还是用IDEA比较多,所以也确实珍藏了一些 ...
- asp.net core 3.x 身份验证-1涉及到的概念
前言 从本篇开始将围绕asp.net core身份验证写个小系列,希望你看完本系列后,脑子里对asp.net core的身份验证原理有个大致印象.至于身份验证是啥?与授权有啥联系?就不介绍了,太啰嗦. ...
- 目标检测之RCNN，fast RCNN，faster RCNN
RCNN: 候选区生成(Selective Search). 分割成2000左右的候选小区域 合并规则:颜色.纹理相近,尺度均匀,合并后形状规则 特征提取. 归一候选区尺寸为227×227,归一方法. ...
- Codeforces_723
A.取中间那个点即可. #include<bits/stdc++.h> using namespace std; ]; int main() { ios::sync_with_stdio( ...
- Codeforces_734_C
http://codeforces.com/problemset/problem/734/C 枚举第一种,二分第二种,注意不取的情况. #include<iostream> #includ ...
- CERC2017 H Hidden Hierarchy(树+模拟)
题意: 在一些给定的目录里按要求展开到制定大小并按字典序输出 思路: 因为有目录这个东西,所以想到模拟一个类似字典树的东西,不过这里每个儿子可能有n个节点,而且不能O(1)查询了 代码超长.. #in ...
- 手写Tomcat
学习JavaWeb之后,只知道如何部署项目到Tomcat中,而并不了解其内部如何运行,底层原理为何,因此写下此篇博客初步探究一下.学习之前需要知识铺垫已列出:Tomcat目录结构.HTTP协议.IO. ...
- JAVA 对守护线程的理解
1.在start之前,setDaemon. 该现场就成为守护线程了. 2.守护现线程并不是主线程结束,子线程(守护线程)也跟着结束.而是守护线程在没有用户线程运行的情况伴随着JVM退出而结束. 示例代 ...
- rabbit MQ 消息队列
为什么会需要消息队列(MQ)? 一.消息队列概述消息队列中间件是分布式系统中重要的组件,主要解决应用解耦,异步消息,流量削锋等问题,实现高性能,高可用,可伸缩和最终一致性架构.目前使用较多的消息队列有 ...