vuex用法(个人理解,还在学习)

来源:互联网 发布:建站abc教程 编辑:程序博客网 时间:2024/04/29 07:36
vuex是什么?
状态管理
它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。


就是前端的数据库
当组件之间的关联度比较低的时候,有想获取其中的数据,项目有比较大的时候,就比较适合使用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
原创粉丝点击