Javascript vuejs 2.0组件无法使用模块vuex访问操作方法
我正在使用模块设计测试Vuejs 2.0和Vuex,但组件无法访问操作方法 我的组成部分:Javascript vuejs 2.0组件无法使用模块vuex访问操作方法,javascript,vue.js,vuex,Javascript,Vue.js,Vuex,我正在使用模块设计测试Vuejs 2.0和Vuex,但组件无法访问操作方法 我的组成部分: import {mapGetters, mapActions} from 'vuex' export default { computed: mapGetters({ clients: 'clients', fields: 'fields' }), methods: mapActions({ init: 'init' }), created: () =&g
import {mapGetters, mapActions} from 'vuex'
export default {
computed: mapGetters({
clients: 'clients',
fields: 'fields'
}),
methods: mapActions({
init: 'init'
}),
created: () => {
console.log(this.init)
}
}
我的模块:
const state = {
'fields': [
{
'field': 'name',
'label': 'Nom'
},
{
'field': 'adresse',
'label': 'Adresse'
},
{
'field': 'amount',
'label': 'Amount'
},
{
'field': 'contact',
'label': 'Contact'
}
],
items : []
}
export const SET_CLIENTS = 'SET_CLIENTS'
const mutations = {
[SET_CLIENTS] (state, clients) {
state.items = clients;
}
}
const actions = {
init: ({ commit }, payload) => {
let clients = []
for(let i = 0; i < 100; i++){
clients.push({
'name': 'Client '+i,
'adresse': '14000 Caen',
'amount': '1000',
'contact': 'contact@client'+i+'.com'
})
}
commit(SET_CLIENTS, { clients })
}
}
const getters = {
clients (state) {
return state.items;
},
fields (state) {
return state.fields;
}
}
export default {
state,
mutations,
getters,
actions
}
所有项目代码可在此处获得:
如果您测试它,您将看到init方法在组件创建时是未定义的
提前谢谢 我认为您的商店模块导出错误。试试这个: 在
模块.js中
:
export default {
state: {}, // define your state here
getter: {}, // define your getters here
actions: {}, // define your actions here
mutations: {} // define your mutations here
}
然后在您的店铺内:
import Vue from 'vue'
import Vuex from 'vuex'
import module from './modules/module.js'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
module // your moudle
}
})
export default store
您所说的无法访问操作方法是什么意思?你想如何访问它们?这不会改变任何事情。我已经这样做了,所以我在问题中添加了商店创建代码。thxWell你能更新你的问题吗?因为看不到你想如何称呼你的行为,或者你遇到了什么错误
import Vue from 'vue'
import Vuex from 'vuex'
import module from './modules/module.js'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
module // your moudle
}
})
export default store