一、vuex模块化modules
1、项目根目录新建一个sotre文件夹,在store文件夹内,新建两个文件(一个文件,一个文件夹),一个index.js文件,一个modules文件夹。
- store
- index.js --文件
- modules --文件夹
2、store->index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//把modules文件底下的模块遍历进来
const modulesFiles = require.context('./modules', true, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
// set './app.js' => 'app'
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
const value = modulesFiles(modulePath)
modules[moduleName] = value.default
return modules
}, {})
export default new Vuex.Store(
modules
})
3、store->modules
目录结构
- modules
- moduleA.js
- moduleB.js
4、具体模块写法,moduleA.js
const moduleA ={
namespaced:true, //开启namespace:true,该模块就成为命名空间模块了
state:{
cartShop:"one-sotre",
count:0
},
getters:{...},
mutations:{...},
actions:{...}
7、Count组件中使用
<script>
import { mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default{
name:'Count' ,
data(){
},
computed:{
//组件中以对象形式获取state,我们也可以用简写的方式,如果用简写方式就要以数组方式进行存取
...mapState({
count:state=>state.cart.count
cartShop:state=>state.cart.cartShop
})
//因为我们有多个模块,并且我们为模块加上了命名空间,所以我们可以在前面指定名字,来跟vuex说我们需要从哪个模块里面获取这个状态
...mapState('cart',['count','cartShop'])
//mapGetters获取的两种方式
//1
...mapGetters('moduleA',['moduleAGetter']),此处的moduleA,不是以前缀的形式出现!!!
//2.别名状态下
...mapGetters({
paramGetter:'moduleA/moduleAGetter
})
},
methods:{
4.组件中调用命名空间模块中的Mutations
共有三种方式,如下:
//1,3加个前缀moduleA/,都可以实现。2使用辅助函数未变名称的特殊点!!!
//1.直接获取
commonMutation(){
this.$store.commit('moduleA/moduleAMutation');
},
//2.用mapMutations
...mapMutations('moduleA',['moduleAMutation']),
//3.别名状态下
...mapMutations({
changeNameMutation:'moduleA/moduleAMutation'
}),
5.组件中调用命名空间模块中的Actions(与mutations一致)
共有三种方式,如下:
1,3加个前缀moduleA/,都可以实现。2使用辅助函数未变名称的特殊点!!!
//1.
commonAction(){
this.$store.dispatch('moduleA/moduleAAction')
},
//2.
...mapActions('moduleA',['moduleAAction']),
//3.别名状态下
...mapActions({
changeNameAction:'moduleA/moduleAAction'
})
}
}