vue之vuex

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。