要按需导入和导出 Vant 组件库的 Vuex 模块,首先需要在项目的入口文件中引入所需的组件:
import { Button, Toast } from 'vant';
import 'vant/lib/index.css';
Vue.use(Button);
Vue.use(Toast);
接下来,创建一个 store
文件夹,在该文件夹下创建 index.js
文件,用于定义 Vuex 的模块、状态和操作。
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++;
}
},
actions: {
incrementAsync({ commit }) {
setTimeout(() => {
commit('increment');
}, 1000);
}
}
});
export default store;
在主应用程序的入口文件中,引入 store
:
import Vue from 'vue';
import App from './App.vue';
import store from './store';
new Vue({
store,
render: h => h(App)
}).$mount('#app');
最后,在需要使用该 Vuex 模块的组件中,可以按照以下方式来获取和使用该模块的状态和操作:
import { mapState, mapActions } from 'vuex';
export default {
computed: {
...mapState(['count'])
},
methods: {
...mapActions(['incrementAsync'])
}
}
以上代码中,mapState
函数可以将模块的状态映射到组件的计算属性中,而 mapActions
函数可以将模块的操作映射到组件的方法中。