fafa.js文件
import * as fafaApi from '@/api/fafa'
const fafa = {
state: {
newOrderNum: 9 // 新订单数量
},
mutations: {
SET_NEWORDERNUM: (state, num) => {
state.newOrderNum += num
}
},
actions: {
// 获取新订单数量的接口
GetNewOrderNum({ commit, state }, params) {
// return new Promise((resolve, reject) => {
// fafaApi
// .getNewOrderNum(params)
// .then(res => {
// console.log('res=', res)
// // commit('SET_NEWORDERNUM', res.data.num)
// })
// .catch(err => {
// reject(err)
// })
// })
}
}
}
export default fafa
Vuex的index.js文件
import fafa from './modules/fafa'
export default new Vuex.Store({
modules: {
fafa, // 将 fafa 模块添加到 modules 中
},
state: {},
mutations: {},
actions: {},
getters: {},
})
我们的组件
import { mapState } from 'vuex'
export default {
computed: {
...mapState({
newOrderNum: state => state.fafa.newOrderNum
})
},
// 其他组件选项...
}
在上述代码中，我们使用了对象语法来映射 newOrderNum 变量。我们指定了一个计算属性 newOrderNum，并使用箭头函数来返回 state.fafa.newOrderNum 的值。文章来源：https://www.toymoban.com/news/detail-624529.html
这样，newOrderNum 变量就会被正确映射到组件中，并可以在模板中使用了。文章来源地址https://www.toymoban.com/news/detail-624529.html
到了这里，关于Vuex 中，使用modules时，不使用命名空间的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
