Module 模块化 + 命名空间
<!-- 1. 创建模块化 实例对象 -->
<!-- 在 store 下 modules 创建一个 '功能模块'.js -->
目录：
store
|-- modules
|-- pm.js
|-- index.js
|-- state.js
|-- getters.js
|-- mutations.js
|-- actions.js
<!-- 2.pm.js ----------------- -->
<script>
const state = {
title: "111",
msg: "信息"
}
const getters = {
titleGet(state, getters){
console.log('state',state);
console.log('getters',getters);
return state.title + '1111你哈！'
}
}
const mutations = {
getData(state, payload){
console.log('这是什么？',state);
console.log('触发函数',payload);
state.title = payload;
}
}
const actions = {
addTime(context, payload){
console.log('异步',context)
console.log('触发函数2',payload);
context.commit('getData', payload);
}
}
export default {
namespaced: true, // 开启命名空间
state,
getters,
actions,
mutations
}
</script>
<!-- 3. index.js ------------- -->
<script>
import Vue from "vue";
import Vuex from "vuex";
// 全局实例
import state from "./state"
import getters from "./getters"
import mutations from "./mutations"
import actions from "./actions"
// 局部实例 (命名空间)
import pm from "./modules/pm"
Vue.use(Vuex);
// 生产环境 严格模式关闭
const debug = process.env.NODE_ENV !== 'production';
const store = new Vuex.Store({
strict: debug,
state,
getters,
mutations,
actions,
modules: {
pm
}
})
export default store;
</script>
<!-- 4. 组件中使用： -->
<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
export default {
methods: {
...mapMutations({
getData: 'pm/getData'
}),
...mapActions({
addTime: 'pm/addTime'
})
},
computed: {
// 第一种方法
...mapState({
title: state => {
console.log('111',state)
return state.pm.title;
}
}),
// 第二种方法
...mapState('pm',{
title: state => state.title
})
// ======================
...mapGetters({
titleGet: 'pm/titleGet'
})
}
}
</script>
