2019独角兽企业重金招聘Python工程师标准>>>

1. 安装

 
  1. $ npm install vuex

2. 使用

1. 新建store文件夹

2. 新建store/index.js文件

核心代码

 
  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  3. import User from './Modules/User'
  4. Vue.use(Vuex)
  5. export default new Vuex.Store({
  6. modules: {
  7. User
  8. }
  9. })

3. 新建Modules/user.js文件 【模块文件,不同模块对应不同文件】

核心代码

 
  1. import NetUtils from '../../common/utils/NetUtils'
  2. const state = {
  3. DataList: []
  4. }
  5. const mutations = {
  6. PushDataList (state, data) {
  7. state.DataList = data.info
  8. }
  9. }
  10. const actions = {
  11. GetDataList ({commit}, data) {
  12. let requestUrl = 'http://happy.dpxiao.com/api/v1/user/getList'
  13. NetUtils.R(requestUrl, null, function (res) {
  14. commit({
  15. type: 'PushDataList',
  16. info: res.data
  17. })
  18. })
  19. }
  20. }
  21. export default {
  22. state,
  23. mutations,
  24. actions
  25. }

3. 引入使用

1. main.js文件引入,这里有个重点,store不能修改为其他名称

2. vue使用

核心代码

 
  1. <template>
  2. <div id="testVue">
  3. {{testName}}
  4. </div>
  5. </template>
  6. <script>
  7. import { mapState } from 'vuex'
  8. export default {
  9. name: 'testVue',
  10. // 数据初始化
  11. data () {
  12. return {
  13. testName: 'hello world'
  14. }
  15. },
  16. computed: {
  17. ...mapState({
  18. // 获取测试的数据
  19. testValue: state => state.User.DataList
  20. })
  21. },
  22. mounted () {
  23. this.getData()
  24. },
  25. // 方法
  26. methods: {
  27. getData () {
  28. this.$store.dispatch('GetDataList')
  29. }
  30. },
  31. // 监听数据的变化
  32. watch: {
  33. testValue: function (val) {
  34. console.log(val.name)
  35. console.log(val.age)
  36. }
  37. }
  38. }
  39. </script>
  40. <style>
  41. </style>

转载于:https://my.oschina.net/u/3783808/blog/1623210

2_vuex状态管理器相关推荐

  1. [react] 状态管理器它精髓是什么?

    [react] 状态管理器它精髓是什么? 统一的数据管理 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题

  2. [react] 状态管理器解决了什么问题?什么时候用状态管理器?

    [react] 状态管理器解决了什么问题?什么时候用状态管理器? 专注 view 层 React 官网是这么简介的.JavaScript library for building user inter ...

  3. [react] 什么时候使用状态管理器?

    [react] 什么时候使用状态管理器? 1用户的使用方式复杂 2.不同身份的用户有不同的使用方式(比如普通用户和管理员) 3.多个用户之间可以协作 4.与服务器大量交互,或者使用了WebSocket ...

  4. flux react php,Vue的Flux框架之Vuex状态管理器

    学习vue之前,最重要是弄懂两个概念,一是"what",要理解vuex是什么:二是"why",要清楚为什么要用vuex. Vuex是什么? Vuex 类似 Re ...

  5. hooks组件封装 react_名符其实的react下一代状态管理器hox

    自从 React16 版本发布 Hooks 以来,大家纷纷上车尝鲜.毫无疑问, Hooks 在一定程度上解决了组件间功能和逻辑复用的问题,在组件间的逻辑的封装和复用确实真香,但 Hooks 在数据状态 ...

  6. 名符其实的react下一代状态管理器hox

    前言 自从React16版本发布Hooks以来,大家纷纷上车尝鲜.毫无疑问,Hooks在一定程度上解决了组件间功能和逻辑复用的问题,在组件间的逻辑的封装和复用确实真香,但Hooks在数据状态的共享方法 ...

  7. Redux 入门教程,应用的状态管理器

    Redux由Flux演变而来,提供几个简单的API来实现状态管理,所谓状态指的是应用数据,所以,Redux本质上是用来管理数据的. 进一步,Redux配合支持数据绑定的视图库使用,就可以将应用状态和视 ...

  8. 打造微信小程序伪状态管理器

    以 app.js 的全局属性为基础,用消息订阅与发布对全局属性进行管理 以 vuex 为例,app.js 全局属性就是 state,消息发布就是 actions ,消息订阅就是 mutations 1 ...

  9. vue项目的状态管理器(Vuex)

    一.什么是vuex Vuex是vue项目的状态管理器(状态管理工具).vue项目的状态是通过vue实例(组件)绑定的变量来体现.所以也可以说vuex是用来管理vue项目中的各种变量(vue项目中的组件 ...

最新文章

  1. 代码中配置log4j (同时输出不同级别的log到不同终端)
  2. 表格(增加行号) http://www.blogjava.net/zeyuphoenix/archive/2010/04/19/318788.html
  3. android 解决ListView点击与滑动事件冲突
  4. 浏览器插件之ActiveX开发(二
  5. CString与LPCWSTR、LPSTR、char*、LPWSTR等类型的转换【转】
  6. 为你的应用程序添加动态Java代码
  7. Java字符串处理之返回指定字符串下标(indexOf)
  8. 从网络营销辞职转行软件测试,100天的心酸拿到9K,过程都是自己在苦撑,只因我...
  9. LeetCode-107二叉树的层次遍历 II-BFS实现
  10. 评价的等级优良差_老师问:小学考试用优良等级评价,可取吗?
  11. Python之选择结构(案例1:快递价格计算系统)
  12. 技术江湖--讲座笔记
  13. 优化 RxJS 改造示例
  14. ARCH模型和GARCH模型
  15. 虎牙被抬员工当事人已收到开庭通知
  16. 程序员,你真的会写简历吗?
  17. Opencv:图像旋转,cv2.getRotationMatrix2D 和 cv2.warpAffine 函数
  18. Hi3516开发笔记(二):Hi3516虚拟机基础环境搭建之串口调试、网络连接以及sftp文件传输
  19. 休眠(Hibernate)和睡眠(Sleep)的区别
  20. CUDA与cuDNN安装教程(超详细)

热门文章

  1. 范凯:一个二次创业者的失败
  2. ironic驱动-IMPITool
  3. spring配置文件import标签中使用${}占位符获得配置文件的属性值
  4. ORA-00913错误:PL/SQL: ORA-00913: too many values
  5. 用批处理查询电脑信息
  6. 爱上MVC~为Html.EditorForModel自定义模版
  7. 三大运营商抢夺物联网市场 中国联通物联网连接数突破5000万
  8. Android零基础入门第11节:简单几步带你飞,运行Android Studio工程
  9. Ubuntu系统在VMware虚拟机中显示显示过小
  10. MySQL数据库一个字段对应多个值得模糊查询