写给新手同学的写给新手同学的vuex快速上手指北小结快速上手指北小结
本文介绍了写给新手同学的vuex快速上手指北小结，分享给大家，具体如下
引入引入
//store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {...},
mutations: {...},
actions: {...}
})
export default store
//main.js
...
import store from './store'
Vue.prototype.$store = store
const app = new Vue({
store,...
})
...
//test.vue 使用时：
import {mapState,mapMutations} from 'vuex'
State篇篇
state更新实时渲染是基于==computed==这个计算属性的,直接赋给data只能赋值初始值，不会随着state改变实时渲染
<!--state改变不会实时渲染-->
export default {
data() {
return {
name:this.$store.state.name,
};
},
}
<!--监听state改变重新渲染视图-->
<template>
<div>
{{name}}
</div>
<template>
export default {
computed: {
name() {
return this.$store.state.name;
}
},
}
注意： data中的变量如果和computed中的变量重名,data优先，注意命名
获取多个state值，写多个函数return,很繁琐，所以有==mapState==辅助函数
<!--取多个很冗余,繁琐-->
export default {
computed: {
token(){
return this.$store.state.token;
}，
name(){
return this.$store.state.name;
}
},
}
下载后可阅读完整内容，剩余5页未读，立即下载
weixin_38741030
- 粉丝: 3
- 资源: 924
我的内容管理
展开
最新资源
- C++标准程序库：权威指南
- Java解惑：奇数判断误区与改进方法
- C++编程必读：20种设计模式详解与实战
- LM3S8962微控制器数据手册
- 51单片机C语言实战教程：从入门到精通
- Spring3.0权威指南：JavaEE6实战
- Win32多线程程序设计详解
- Lucene2.9.1开发全攻略：从环境配置到索引创建
- 内存虚拟硬盘技术：提升电脑速度的秘密武器
- Java操作数据库：保存与显示图片到数据库及页面
- ISO14001：2004环境管理体系要求详解
- ShopExV4.8二次开发详解
- 企业形象与产品推广一站式网站建设技术方案揭秘
- Shopex二次开发：触发器与控制器重定向技术详解
- FPGA开发实战指南：创新设计与进阶技巧
- ShopExV4.8二次开发入门：解决升级问题与功能扩展
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
