脚本宝典收集整理的这篇文章主要介绍了vuex初探,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
vuex是与redux类似的应用于vue应用程序的前端数据处理框架。vuex汲取了redux很多优秀的特性,比如说单一的状态树,通过dispatch一个action来更新状态树。同时由于vuex只是针对vue的,其本身与vue的契合度更高,也更加轻量,可以在不需要第三方库的情况下支持异步请求。
在vuex中存在几个重要的概念:
1.state: 与redux的state一样,是整个应用级别的状态树,即“single state tree”。
2.getters: 在组件内部获取state。
3.mutations: commit mutations是唯一更新state的方式。
4.actions:执行异步操作,分发mutainons。
5.modules:将前端的各个数据模块根据需要互相独立,防止在不断的迭代中,数据臃肿混乱。
仔细一看,和redux貌似没毛区别呢。。。
getters相当于connect
mutations相当于reducer
其实在vue中用vuex十分简单,总结起来主要就是两步:
创建store
在组件中挂在store
首先我们要生成一个store实例
import Vue from 'vue'
import Vuex from 'vuex'
import * as modules from './modules'
import actions from './action'
import * as getters from './getters'
Vue.use(Vuex)
const store = new Vuex.Store({
modules,
actions,
getters,
})
export default store
在action.js文件中定义了一个getData方法
export default {
getData({ commit }) {
commit('getCatalog')
}
}
在action我们接受了commit方法,它会分发mutation,这里在组件中dispatch getData方法后,会分发到getCatalog的mutation中。
另外在action中,我们还可以调用异步的方法。
export default {
async getData({ commit }) {
commit('getCatalog', await getApiData())
}
}
getApiData返回的结果会作为第二个参数被传入到mutation中,在mutation中我们可以修改state。
const state = {
catalog: [],
}
const mutations = {
getCatalog(state, response) {
state.catalog = response.body.catalog
}
}
export default {
state,
mutations,
}
export const getCatalog = state => { return state.article.catalog }
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'
import store from './vuex/store'
Vue.use(VueRouter)
const router = new VueRouter({
mode: 'history',
routes,
})
new Vue({
el: '#app',
router: router,
store,
})
好的大功告成。
<script type="text/javascript">
import { mapGetters, mapActions } from 'vuex'
export default {
computed: mapGetters({
catalog: 'getCatalog',
}),
methods: mapActions([
"getData"
]),
beforeMount () {
this.$store.dispatch('getData')
},
}
</script>
以上是脚本宝典为你收集整理的vuex初探全部内容,希望文章能够帮你解决vuex初探所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。