浅谈Vuex的状态管理(全家桶)

发布时间：2020-12-17 02:44:15 所属栏目：百科来源：网络整理

导读：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

以上是vuex的官方文档对vuex的介绍，官方文档对vuex的用法进行了详细的说明。这里就不再细讲vuex的各个用法，写这篇博客的目的只是帮助部分同学更快地理解并上手vuex。

1. 安装

2. 在main.js 主入口js里面引用store.js

//vue实例
new Vue({
el: '#app',router,store,//把store挂在到vue的实例下面
template: '',components: { App }
})

3. 在store.js里引用Vuex

// 定义常量如果访问他的话，就叫访问状态对象
const state = {
count: 1
}

// mutations用来改变store状态,如果访问他的话，就叫访问触发状态
const mutations = {
//这里面的方法是用 this.$store.commit('jia') 来触发
jia(state){
state.count ++
},jian(state){
state.count --
},}
//暴露到外面，让其他地方的引用
export default new Vuex.Store({
state,mutations
})

4. 在vue组件中使用

使用$store.commit('jia')区触发mutations下面的加减方法

Hello Vuex

5. 查看演示

6. state访问状态对象

使用computed计算

Hello Vuex

7. mutations触发状态（同步状态）

Hello Vuex

8. getters计算属性

getter不能使用箭头函数，会改变this的指向

在store.js添加getters

export default new Vuex.Store({
state,mutations,getters
})
//count的参数就是上面定义的state对象
//getters中定义的方法名称和组件中使用的时候一定是一致的,定义的是count方法，使用的时候也用count，保持一致。
组件中使用

9. actions (异步状态)

在store.js添加actions

// 定义常量
const state = {
count: 1
}

// mutations用来改变store状态同步状态
const mutations = {
jia(state){
state.count ++
},}
// 计算属性
const getters = {
count(state){
return state.count + 66
}
}
// 异步状态
const actions = {
jiaplus(context){
context.commit('jia') //调用mutations下面的方法
setTimeout(()=>{
context.commit('jian')
},2000)
alert('我先被执行了，然后两秒后调用jian的方法')
},jianplus(context){
context.commit('jian')
}
}

export default new Vuex.Store({
state,getters,actions
})

在组件中使用

Hello Vuex

10. modules 模块

适用于非常大的项目，且状态很多的情况下使用，便于管理

修改store.js

const state = {
count: 1
}
const mutations = {
jia(state){
state.count ++
},}
const getters = {
count(state){
return state.count + 66
}
}
const actions = {
jiaplus(context){
context.commit('jia') //调用mutations下面的方法
setTimeout(()=>{
context.commit('jian')
},jianplus(context){
context.commit('jian')
}
}

//module使用模块组的方式 moduleA
const moduleA = {
state,actions
}

// 模块B moduleB
const moduleB = {
state: {
count:108
}
}

export default new Vuex.Store({
modules: {
a: moduleA,b: moduleB,}
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

浅谈Vuex的状态管理(全家桶)

{{$store.state.count}}

{{count}}

{{count}}

{{count}}