Vuex 是 Vue.js 的一个状态管理模式和库,为应用中的所有组件提供了一个集中式的存储管理,并提供了一种强大的方式来管理应用的状态。Vuex 包含以下核心概念:
-
State:定义了应用的状态,类似于组件中的 data。
-
Getters:用于访问 State 中的状态,并进行计算或转换。
-
Mutations:用于修改 State 中的状态,必须是同步操作。
-
Actions:用于提交 Mutations,可以是异步操作。
为了更好地组织项目代码,我们通常将 Vuex 的不同概念(如 state、mutations、actions、getters)写在不同的文件中,以便于维护和管理。下面是一个示例文件结构:
├── store/
│ ├── state.js
│ ├── mutations.js
│ ├── actions.js
│ ├── getters.js
│ └── index.js
└── App.vue
state.js
文件定义了应用的状态;mutations.js
文件定义了修改状态的 mutations;actions.js
文件定义了提交 mutations 的 actions;getters.js
文件定义了获取状态的 getters;index.js
文件则将这些文件中的内容整合到一个 Vuex 实例中,以便于在应用程序中使用。
下面是一个示例代码:
state.js
export default {count: 0
}
mutations.js
export default {increment (state) {state.count++},decrement (state) {state.count--}
}
actions.js
export default {incrementCount ({ commit }) {commit('increment')},decrementCount ({ commit }) {commit('decrement')}
}
getters.js
export default {getCount: state => state.count
}
index.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'Vue.use(Vuex)export default new Vuex.Store({state,mutations,actions,getters
})
在上面的例子中,我们将不同概念分别写在了不同的文件中。最后在 index.js
中,将它们整合到一个 Vuex 实例中,并导出。然后在 Vue.js 应用程序中使用:
App.vue
<template><div><p>Count: {{ count }}</p><button @click="incrementCount">Increment</button><button @click="decrementCount">Decrement</button></div>
</template><script>
import { mapGetters, mapActions } from 'vuex'export default {computed: {...mapGetters(['getCount']),count () {return this.getCount}},methods: {...mapActions(['incrementCount','decrementCount'])}
}
</script>
在组件中,我们可以使用 mapGetters
和 mapActions
函数来访问状态和提交 mutations。注意,我们需要将 getCount
映射到 count
计算属性中,以便在模板中使用。
我们先使用 mapState
辅助函数将 state 中的 count
映射为组件中的计算属性 count
,在模板中使用 count
即可获取 state 中的 count
。然后,我们使用 mapMutations
辅助函数将 increment
mutations 映射为组件中的 methods 中的 increment
方法,这样,我们在 increment
方法中调用 increment
mutations 即可修改 state 中的 count
。最后,我们使用 mapActions
辅助函数将 incrementAsync
actions 映射为组件中的 methods 中的 incrementAsync
方法,这样,我们在 incrementAsync
方法中调用 incrementAsync
actions 即可异步修改 state 中的 count
。