vuex用法(个人理解,还在学习)
来源:互联网 发布:建站abc教程 编辑:程序博客网 时间:2024/04/29 07:36
vuex是什么?
状态管理
它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
就是前端的数据库
当组件之间的关联度比较低的时候,有想获取其中的数据,项目有比较大的时候,就比较适合使用vuex,这个比较占内存
用户将想要操作的数据先存储到里面,其他的组件就可以获取里面的数据
这里就不做实例了
2.在store里面新建对应的文件
2.1 action ---用户通过action的操作,改变state的数据
2.2 getter ---其他组件通过getter里面的方法获取state的数据
例如:
export const singer = state => state.singer
2.3 index---vuex的入口文件
-----------例如-------
import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import state from './state'
import mutations from './mutations'
import createLogger from 'vuex/dist/logger'
Vue.use(Vuex)
export default new Vuex.Store({
actions,
getters,
state,
mutations
})
2.4 mutation-types ---用户向state存储数据的时候的类型
例如:
export const SET_SINGER='SET_SINGER'
2.5 mutation ---用户通过mutation想state的类型
例如:
import * as types from './mutation-types'
const matutions={
[types.SET_SINGER](state,singer){
state.singer=singer
}
}
export default matutions
2.6 state---临时存储的数据
const state = {
singer: {},
}
export default state
3.在main里面导入store
new Vue({store})
4.向state里面存储数据
组件通过vuex提供的语法糖,...mapMutations (相当于this.$store.commit('xxx'))
...mapMutations({
setSinger:‘SET_SINGER’ //方法名,执行mutation-types里面的什么的操作,实际执行的是mutations的方法,
})
组件里面的方法直接调用setSinger(item),就可以将item存入到state里面
5.向state里面获取数据
组件用vuex提供的...mapGetters方法,通过getter里面的方法, 获取state里面的数据
...mapGetters([ 'singer' ]) //对应的数据就是state里面的singer,用户可以直接将数据赋值给dom
状态管理
它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
就是前端的数据库
当组件之间的关联度比较低的时候,有想获取其中的数据,项目有比较大的时候,就比较适合使用vuex,这个比较占内存
用户将想要操作的数据先存储到里面,其他的组件就可以获取里面的数据
那么问题来了,怎么存储呢?怎么获取里面的数据呢?
vuex怎么使用?
1.首先呢,先要安装vuex的包,这里就不做实例了
2.在store里面新建对应的文件
2.1 action ---用户通过action的操作,改变state的数据
2.2 getter ---其他组件通过getter里面的方法获取state的数据
例如:
export const singer = state => state.singer
2.3 index---vuex的入口文件
-----------例如-------
import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import state from './state'
import mutations from './mutations'
import createLogger from 'vuex/dist/logger'
Vue.use(Vuex)
export default new Vuex.Store({
actions,
getters,
state,
mutations
})
2.4 mutation-types ---用户向state存储数据的时候的类型
例如:
export const SET_SINGER='SET_SINGER'
2.5 mutation ---用户通过mutation想state的类型
例如:
import * as types from './mutation-types'
const matutions={
[types.SET_SINGER](state,singer){
state.singer=singer
}
}
export default matutions
2.6 state---临时存储的数据
const state = {
singer: {},
}
export default state
3.在main里面导入store
new Vue({store})
4.向state里面存储数据
组件通过vuex提供的语法糖,...mapMutations (相当于this.$store.commit('xxx'))
...mapMutations({
setSinger:‘SET_SINGER’ //方法名,执行mutation-types里面的什么的操作,实际执行的是mutations的方法,
})
组件里面的方法直接调用setSinger(item),就可以将item存入到state里面
5.向state里面获取数据
组件用vuex提供的...mapGetters方法,通过getter里面的方法, 获取state里面的数据
...mapGetters([ 'singer' ]) //对应的数据就是state里面的singer,用户可以直接将数据赋值给dom
阅读全文
0 0
- vuex用法(个人理解,还在学习)
- vuex文档(附加个人理解)
- 个人对于vuex理解的意义
- vuex理解
- Vuex理解
- 委托的用法(个人理解记录)
- 还在吐槽翻译的外版书质量差吗?谈谈我个人的理解
- vuex学习
- 学习vuex
- 个人对sparse在神经网络学习中的一些理解
- android学习总结(个人理解)
- Servlet学习,个人理解
- startActivities的用法个人理解
- 深入理解vuex
- 初步理解vuex
- Vuex的自我理解
- Vuex我的理解
- android AsyncTask基础用法及个人理解(上)
- 【Leetcode-Easy-101】 Symmetric Tree
- springmvc参数收集与类型转换源码解析
- jfreechart使用柱状图重叠
- 【笔记】仍然不太会的矩阵系列
- java+mybatis+mysql 中文乱码问题
- vuex用法(个人理解,还在学习)
- 图像三维重建方法综述
- Basic git command
- HDU-3487 Play with Chain (splay好题 带翻转 cut-link操作)
- 观光公交——堆优化
- python-socket.listen(backlog)-等待队列的长度
- linux 批量删除key值
- 【bzoj 1053/P1463】反素数 HAOI2007(爆搜)
- 设计模式之观察者模式