this.$store.commit 模块化用法
时间: 2024-02-27 19:48:33 浏览: 22
this.$store.commit是Vuex中用于提交mutation的方法。在模块化的情况下,我们需要在store中定义一个模块,然后在组件中使用模块化的方式来提交mutation。具体步骤如下:
1.在store文件夹中创建一个新的js文件,例如user.js,用于定义用户模块。
2.在user.js文件中定义state、mutations、actions和getters等属性和方法,例如:
```javascript
const state = {
userInfo: null
}
const mutations = {
SET_USER_INFO(state, userInfo) {
state.userInfo = userInfo
}
}
const actions = {
setUser({ commit }, userInfo) {
commit('SET_USER_INFO', userInfo)
}
}
const getters = {
getUserInfo: state => state.userInfo
}
export default {
state,
mutations,
actions,
getters
}
```
3.在store.js文件中引入user.js文件,并在modules属性中添加user模块,例如:
```javascript
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
user
}
})
```
4.在组件中使用mapMutations方法来映射user模块中的mutations,例如:
```javascript
import { mapMutations } from 'vuex'
export default {
methods: {
...mapMutations('user', ['SET_USER_INFO'])
}
}
```
5.在组件中使用this.$store.commit方法来提交user模块中的mutation,例如:
```javascript
this.SET_USER_INFO(userInfo)
```