VUEX及VUE项目结构粗解

最新推荐文章于 2025-09-09 08:30:21 发布

原创最新推荐文章于 2025-09-09 08:30:21 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了Vue.js项目中使用的状态管理模式Vuex。包括store的基本结构、state的应用状态定义、actions的操作描述、mutations的状态更新方法、getters的数据获取方式及modules的模块划分等核心概念。

VUEX核心

store
    一般使用方法
    export default{
        const store = new Vuex.Store({
            state: {
                },
            actions: {
                },
            mutations: {
                },
            getters: {
                },  
            modules: {
                }
        })
    }

1.state 定义了应用状态的数据结构，同样可以在这里设置默认的初始状态。

        定义：
            state: {
              projects: [],
              userProfile: {}
            }
        使用：
            computed: {
                  projects () {
                    return this.$store.state.projects
                  }
                }
            可以通过mapState函数简化代码

2.actions 即是定义提交触发更改信息的描述，常见的例子有从服务端获取数据，在数据获取完成后会调用store.commit()来调用更改 Store 中的状态。

        可以在组件中使用dispatch来发出 Actions。
            定义：
                如
                    actions: {
                        LOAD_PROJECT_LIST: function ({ commit }) {
                          axios.get('/secured/projects').then((response) => {
                            commit('SET_PROJECT_LIST', { list: response.data })
                          }, (err) => {
                            console.log(err)
                          })
                        }
                    }


            使用：
                如
                    this.$store.dispatch('LOAD_PROJECT_LIST', {})

3.mutations 调用 mutations 是唯一允许更新应用状态的地方。

            定义：
                mutations: {
                    SET_PROJECT_LIST: (state, { list }) => {
                      state.projects = list
                    }
                  }
            使用：一般在action中使用commit('SET_PROJECT_LIST', { list: response.data })

4.getters Getters 允许组件从 Store 中获取数据

            定义：
                getters: {
                     completedProjects: state => {
                      return state.projects.filter(project => project.completed).length
                     }
                }
                可以使用mapGetters简化代码
            注： 在项目中一般很少在store中定义getters，而是在使用store的地方定义getters，并且可以通过mapGetters。

5.modules 对象允许将单一的 Store 拆分为多个 Store 的同时保存在单一的状态树中。
随着应用复杂度的增加，这种拆分能够更好地组织代码

VUE项目结构

assets          静态资源目录
components      公共组件
router          路由
service         对api请求的统一管理
store           状态统一管理
view            组件

数据流

这里写图片描述