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

1. 安装

$ npm install vuex

2. 使用

1. 新建store文件夹

2. 新建store/index.js文件

核心代码

import Vue from 'vue'
import Vuex from 'vuex'
import User from './Modules/User'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
User
}
})

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

核心代码

import NetUtils from '../../common/utils/NetUtils'
const state = {
DataList: []
}
const mutations = {
PushDataList (state, data) {
state.DataList = data.info
}
}
const actions = {
GetDataList ({commit}, data) {
let requestUrl = 'http://happy.dpxiao.com/api/v1/user/getList'
NetUtils.R(requestUrl, null, function (res) {
commit({
type: 'PushDataList',
info: res.data
})
})
}
}
export default {
state,
mutations,
actions
}

3. 引入使用

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

2. vue使用

核心代码

<template>
<div id="testVue">
{{testName}}
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: 'testVue',
// 数据初始化
data () {
return {
testName: 'hello world'
}
},
computed: {
...mapState({
// 获取测试的数据
testValue: state => state.User.DataList
})
},
mounted () {
this.getData()
},
// 方法
methods: {
getData () {
this.$store.dispatch('GetDataList')
}
},
// 监听数据的变化
watch: {
testValue: function (val) {
console.log(val.name)
console.log(val.age)
}
}
}
</script>
<style>
</style>

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

2_vuex状态管理器相关推荐

[react] 状态管理器它精髓是什么？
[react] 状态管理器它精髓是什么? 统一的数据管理个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面试题
[react] 状态管理器解决了什么问题？什么时候用状态管理器？
[react] 状态管理器解决了什么问题?什么时候用状态管理器? 专注 view 层 React 官网是这么简介的.JavaScript library for building user inter ...
[react] 什么时候使用状态管理器？
[react] 什么时候使用状态管理器? 1用户的使用方式复杂 2.不同身份的用户有不同的使用方式(比如普通用户和管理员) 3.多个用户之间可以协作 4.与服务器大量交互,或者使用了WebSocket ...
flux react php,Vue的Flux框架之Vuex状态管理器
学习vue之前,最重要是弄懂两个概念,一是"what",要理解vuex是什么:二是"why",要清楚为什么要用vuex. Vuex是什么? Vuex 类似 Re ...
hooks组件封装 react_名符其实的react下一代状态管理器hox
自从 React16 版本发布 Hooks 以来,大家纷纷上车尝鲜.毫无疑问, Hooks 在一定程度上解决了组件间功能和逻辑复用的问题,在组件间的逻辑的封装和复用确实真香,但 Hooks 在数据状态 ...
名符其实的react下一代状态管理器hox
前言自从React16版本发布Hooks以来,大家纷纷上车尝鲜.毫无疑问,Hooks在一定程度上解决了组件间功能和逻辑复用的问题,在组件间的逻辑的封装和复用确实真香,但Hooks在数据状态的共享方法 ...
Redux 入门教程，应用的状态管理器
Redux由Flux演变而来,提供几个简单的API来实现状态管理,所谓状态指的是应用数据,所以,Redux本质上是用来管理数据的. 进一步,Redux配合支持数据绑定的视图库使用,就可以将应用状态和视 ...
打造微信小程序伪状态管理器
以 app.js 的全局属性为基础,用消息订阅与发布对全局属性进行管理以 vuex 为例,app.js 全局属性就是 state,消息发布就是 actions ,消息订阅就是 mutations 1 ...
vue项目的状态管理器(Vuex)
一.什么是vuex Vuex是vue项目的状态管理器(状态管理工具).vue项目的状态是通过vue实例(组件)绑定的变量来体现.所以也可以说vuex是用来管理vue项目中的各种变量(vue项目中的组件 ...

2_vuex状态管理器

1. 安装

2. 使用

核心代码

核心代码

3. 引入使用

核心代码

2_vuex状态管理器相关推荐

最新文章

热门文章