官方表示,Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
通俗讲,就是在vue的开发中解决两个问题
传参的方法对于多层嵌套的组件将会非常繁琐,并且对>于兄弟组件间的状态传递无能为力。
我们经常会采用父子组件直接饮用或者通过事件来变声和同步状态的多份拷贝。
我们把不同组件的共享状态抽取出来,以一个全局单例模式管理,在这个这种模式下,我们的组件树构成了一个巨大的“视图”,不管在树的哪个位置,任何组件都能获取状态或者触发行为
即把组件的共享状态抽取出来,以一个全局单例模式管理,在这种模式下,我们的组件树构成了一个巨大的“视图”,不管在树的哪个位置,任何组件都能获取状态或者触发行为!
vuex的应用核心就是store仓库,是一个容器,包含着你应用中大部分的状态
import store from './store'
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
actions.js
getters.js
mutations.js
mutation-types.js
state.js
index.js
store(index.js文件)
这个文件负责把文件引入组织
vuex中的状态是响应式的,一旦改变某个状态,相关联的组件都会得到更新
不能之间改变状态,需要通过提交(commit)来改变
import Vue from 'vue'/需要依赖于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'
/将vuex第三方插件注入到vue实例上/
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'
/创建一个Store对象/
export default new Vuex.Store({
actions,
getters,/对应mapGetters/
mutations,/对应mapMutations/
state,
strict: debug,
plugins: debug?[createLogger()]:[]
})
/定义state对象
state文件负责定义所有用到的数据,但需要是最基本的数据
/
const state = {
singer:{},
count: 1
}
export default state
/编写getters的变量映射
getters文件是对象数据的映射,是一些函数,通关getters来获取state数据不能直接访问,使用箭头函数更加简洁
对应const singer变量
…mapGetters([
'singer'
])
/
export const singer = state => state.singer
Mutation-types文件定义了setter里面的一些函数“接口”,更加工程模式化
export const SET_SINGER = ‘SET_SINGER’
1
Mutation文件是store中状态的唯一方法提交matation,回调函数中的一个参数必须是state作为第一个参数,第二个参数可以使设置状态的状态值
import as types from './mutation-types'
const matutaions = {
/为state的属性赋值
对应
…mapMutations({
setSinger: 'SET_SINGER'
})
this.setSinger(数据)
/
types.SET_SINGER{
state.singer = singer
}
}
export default matutaions
action文件对一些set的集中封装一个事件可以集中改变一些状态
import * as types from './mutation-types'
// 定义一个函数批量修改state下的值
export const selectPlay = function ({commit, state}, {list, index}) {
commit(types.SET_SINGER, list)
}
访问
在组件中设置state状态
vuex提供mapMutations的语法糖;在methods中定义,并且重命名,在mathod中可以直接当成函数来使用
import {mapMutations} from 'vuex'
methods:{
selectSinger(singer){
this.$router.push({
path: /singer/${singer.id}
})
this.setSinger(singer)
//相当于
//this.$store.commit('SET_SINGER',singer)
},
…mapMutations({
setSinger: 'SET_SINGER'
})
}
在组件中访问state状态
vuex提供mapGetters的语法糖;引入之后可以在computed中定义,动态监测数据变化,在页面中可以直接访问
import {mapGetters} from 'vuex'
computed:{
…mapGetters([
'singer'
])
}
在组件中使用actions
vuex提供mapActions的语法糖;在methods中定义,在methods当成一个函数来使用
import {mapActions} from 'vuex'
methods: {
selectItem (item, index) {
this.selectPlay({
list: this.songs,
index
})
},
…mapActions([
])
}
本文地址:https://www.zhuimengzhu.com/details/259.html
转载地址:暂无
转载说明:转载时请在文首注明来源zhuimengzhu.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。zhuimengzhu 保留追究相应责任的权利。