vuex-state
Vuex 通过 store
选项,提供了一种机制将状态从根组件“注入”到每一个子组件中,且子组件能通过 this.$store
访问
- const app = new Vue({
- el: '#app',
- // 把 store 对象提供给 “store” 选项,这可以把 store 的实例注入所有的子组件
- store,
- components: { Counter },//子组件
- template: `
- <div class="app">
- <counter></counter>//引用子组件
- </div>
- `
- })
- //子组件
- const Counter = {
- template: `<div>{{ count }}</div>`,
- computed: {
- count () {
- //调用state
- return this.$store.state.count
- }
- }
- }
mapState
当一个组件需要获取多个状态时候,使用 mapState
辅助函数帮助我们生成计算属性,mapState
函数返回的是一个对象:
- // 在单独构建的版本中辅助函数为 Vuex.mapState
- import { mapState } from 'vuex'
- export default {
- //使用mapState
- computed: mapState({
- // 箭头函数可使代码更简练
- count: state => state.count,
- // 传字符串参数 'count' 等同于 `state => state.count`
- countAlias: 'count',
- // 为了能够使用 `this` 获取局部状态,必须使用常规函数
- countPlusLocalState (state) {
- return state.count + this.localCount
- }
- })
}
- //当映射的计算属性的名称与 state 的子节点名称相同时,我们也可以给 mapState 传一个字符串数组。
- computed: mapState([
- // 映射 this.count 为 store.state.count
- 'count'
- ])
对象展开运算符...
...工具函数将多个对象合并为一个,以使我们可以将最终对象传给 computed
属性
- computed: {
- localComputed () { /* ... */ },
- //使用对象展开运算符将此对象混入到外部对象中
- ...mapState({
- // ...
- })
- }
组件仍然保有局部状态
- var vmA = new Vue({
- data: {
- privateState: {},//每个组件可以有自己的state
- sharedState: store.state
- }
- })
vuex-state的更多相关文章
- vue 关于deep watch / computed 监听不到 vuex state 对象变化的的问题
简而言之,如果vuex state 中是一个对象 {},那么监听就会有问题.先给出解决方案: // 超简易拷贝(如果是深拷贝还多此一举把get/set拷贝进去了,所以用简易拷贝即可) let __VA ...
- vue自学入门-5(vuex state)
vue自学入门-1(Windows下搭建vue环境) vue自学入门-2(vue创建项目) vue自学入门-3(vue第一个例子) vue自学入门-4(vue slot) vue自学入门-5(vuex ...
- how to watch vuex state update
how to watch vuex state update watch https://vuex.vuejs.org/api/#watch https://vuex.vuejs.org/guide/ ...
- weex里Vuex state使用storage持久化
在weex里使用Vuex作为state管理工具,问题来了,如何使得state可以持久化呢?weex官方提供store模块,因此我们可以尝试使用该模块来持久化state. 先看下该模块介绍: stora ...
- Vuex state 状态浅解
对于Vuex中的state里面的理解总是有些欠缺,机制似乎理解了.但是还有很多的不足,在这就先浅谈下自己的理解. vuex 机制中,定义了全局Store,在各个vue组件面的this.$store指向 ...
- vuex state使用
访问vuex中的state值 方式1 <div>{{$store.state.count}}</div> 方式2 <template> <div id=&qu ...
- 万恶的浏览器缓存 Vuex state里面的成员改名后浏览器不会马上更新
今天在用Vuex的时候,在state里面加了个名叫rootUrl的属性 但是怎么都取不到值,重新启动程序,ctrl+f5浏览器刷新都不行,纠结了大半上午,于是用console.log(store.ge ...
- Vue Vuex state mutations
Vuex 解决不同组件的数据共享,与数据持久化 1.npm install vuex --save 2.新建store.js 并引入vue vuex ,Vue.use(Vuex) 3.state在vu ...
- vue v-model 与 vuex state数据绑定问题
最近开发的项目 需要用input 的v-model 直接绑定到vuex的store数据 因为v-model 能与data的数据绑定 尝试了半天 代码如下 <template> <di ...
- [Nuxt] Update Vuex State with Mutations and MapMutations in Vue.js
You commit changes to state in Vuex using defined mutations. You can easily access these state mutat ...
随机推荐
- C# 获取 mp3文件信息【包括:文件大小、歌曲长度、歌手、专辑】
C# 获取 mp3文件信息[包括:文件大小.歌曲长度.歌手.专辑] 第一种方式:[代码已验证] // http://bbs.csdn.net/topics/390392612 string fil ...
- window中的attrib命令
attrib -s -h -r autorun.infattrib +s +h +r autorun.infattrib -s -h -r my.icoattrib +s +h +r my.ico
- JS构造函数原理与原型
1.创建对象有以下几种方式: ①.var obj = {}; ②.var obj = new Object(); ③.自定义构造函数,然后使用构造函数创建对象 [构造函数和普通函数的区别:函数名遵循大 ...
- IP通信基础学习第二周
此周的课程学习应该算是我对此科目真正学校生涯的开始吧,尽管我对该科目仍感到很陌生. 课程一开头,老师就给我们简单的介绍了网络的定义.发展及其分类,重点讲了网络拓扑结构及其在局域网上具体的分层情况.该部 ...
- sql_mode 之 ignore_space
用于忽略mysql系统函数名与之后的括号之间的空格. 还是给个形像的说明吧如:count (*) 通过设置ignore_space 这个sql_mode 就可以把空格给忽略变成count(*) 1 ...
- Hopfield神经网络
神经网络分类 多层神经网络:模式识别 相互连接型网络:通过联想记忆去除数据中的噪声 1982年提出的Hopfield神经网络是最典型的相互连结型网络. 联想记忆 当输入模式为某种状态时,输出端要给出与 ...
- Docker+Consul+Registrator 实现服务注册与发现
Docker+Consul+Registrator实现服务注册与发现 逻辑图 实现nginx节点自动化加入容器IP代理 1.三台Consul agent server作为高可用通过Consul Tem ...
- IDEA设置(含永久破解IDEA)
永久破解IDEA(很多license服务器都是非永久性的,太麻烦了) https://www.cnblogs.com/iathanasy/p/9469280.html,亲测. 在我们为 IDEA 等编 ...
- expect拷贝文件例子
----安装expectcd /tmp wget http://core.tcl.tk/tcl/zip/release/tcl.zipwget https://jaist.dl.sourceforge ...
- Servlet运行原理以及生命周期
一.Servlet生命周期: Servlet加载.实例化.初始化.服务.销毁. 1.初始化init(): 当服务启动时,Servlet被装入tomcat或者其他服务器容器时执行(服务器容器从启动到停止 ...