Vue-modules

单一模块：例

import axios from 'axios'
export default{
    state:{
        a:50
    },
    mutations:{
        add(state,{a}){
            state.a += a
        }
    },
    getters:{
        
    },
    actions:{
        addServe({commit}){
           // console.log(content)
            axios.get('add').then(res => {
                if(res.status == 200){
                    commit('add',{a:res.data.a})
                }
            })
        }
    }
}

以上是单一的模块，在项目比较大的情况下，不同模块都有其独立的全局数据，如果都放到同一个 store.js不好维护

所有利用 modules 解构、拆分

解构、拆分1

将store.js 解构拆分

import Vuex from 'vuex'
// 引入vue
import Vue from 'vue'
// 使用vuex
Vue.use(Vuex)
const moduleA = {
    state: { str: '模块A' },
    mutations: {},
    actions: {},
    getters: {}
}
const moduleB = {
    state: { str: '模块B' },
    mutations: {},
    actions: {},
    getters: {}
}
const moduleC = {
    state: { str: '模块C' },
    mutations: {},
    actions: {},
    getters: {}
}

export default new Vuex.Store({
    modules: {
        a: moduleA,
        b: moduleB,
        c: moduleC
    }
})

在main.js中 只需要引入store.js

import Vue from 'vue'
import App from './App.vue'

import store from "./store/store.js"

//引入axios
import axios from 'axios'
Vue.prototype.$http = axios
new Vue({
  render: h => h(App),
  store: store
}).$mount('#app')

使用：可在任意页面中使用

<div>
    <p>{{$store.state.a.str}}</p>
</div>

解构、拆分2

解构、拆分1不够完整，代码还是都写在store.js文件中，所以还需要将不同模块进行文件的拆分

比如项目中有 news,sports,user等三个模块  创建各自的文件 news.js ,spotrs.js ,user.js

以news.js为例

export default {
    state: {
        str: '我是news'
    },
    mutations: {

    },
    actions: {

    }
}

store,js中引入这些模块文件，进行modules注册

import Vuex from 'vuex'
import Vue from 'vue'
//引入相关模块文件
import news from './news.js'
import sports from './sports.js'
import user from './user.js'
Vue.use(Vuex)

export default new Vuex.Store({
    modules:{
        news,
        sports,
        user
    }
})

页面中使用

<div>
    <p>{{$store.state.sports.str}}</p>
</div>

不同模块文件的同名方法问题

在解构、拆分2中 state有了独立的命名空间，但是其它的还是共享一个空间，比如给news.js设置一个 mutations为add，给sports.js也设置一个 mutations为add，此时会造成数据的混乱

比如 news.js

export default {
    state: {
        num: 100
    },
    mutations: {
        add(state) {
            state.num++
        }
    },
    actions: {

    }
}

比如 sports.js

export default {
    state: {
        num: 100
    },
    mutations: {
        add(state) {
            state.num += 5
        }
    },
    actions: {

    }

页面中显示

<template>
<div>
    <p>我是news{{$store.state.news.num}}</p>
    <p>我是sports{{$store.state.sports.num}}</p>
    <button @click='add'>按我加1</button>
</div>
</template>

methods: {
    add() {
        this.$store.commit('add')
    }
}

此时页面中的数字会同时进行各自的加法运算

解决办法

给每一个store的js文件都设置自己的 namespaced:true,值为true代表 代码独立，每一个模块的  mutations、actions、getters、actions都是独立不共享的

比如news.js

export default{
    namespaced : true,
    state:{
        num : 100
    },
    mutations :{
        addNum(state){
            state.num += 3
        }
    },
    getters:{
        parity(state){
            return state.num % 2 == 0 ? '偶数' : '基数'
        } 
    },
    actions:{}
}

sports.js

const axios = require('axios')
export default{
    namespaced:true,
    state:{
        num : 200
    },
    mutations :{
        
        add(state,{a}){
            state.num += a
        }
    },
    getters:{},
    actions:{
        addServe({commit}){
            axios.get('add').then(res => {
                if(res.status == 200){
                    commit('add',{a:res.data.a})
                }
            })
        }
    }
}

user.js

export default{
    namespaced:true,
    state:{
        num : 300
    },
    mutations :{
        addNum(state){
            state.num += 30
        }
    },
    getters:{},
    actions:{}
}

store.js

import Vuex from 'vuex'
import Vue from 'vue'
import news from './news.js'
import sports from './sports.js'
import user from './user.js'
Vue.use(Vuex)

export default new Vuex.Store({
    modules:{
        news,
        sports,
        user
    }
})

app.vue

<template>
  <div>
    <p>{{$store.state.news.num}}</p>
    <p>{{$store.state.sports.num}}</p>
    <p>{{$store.state.user.num}}</p>
    <button @click="add"><h1>news加3</h1></button>
    <button @click="addServe"><h1>spot加Serve</h1></button>
    <button @click="addUser">user加30</button>
    <h1>{{$store.getters['news/parity']}}</h1>  方括号内设置命名空间
  </div>
</template>
<script>
  export default {
     methods:{
//commit使用方法 加对应的命名空间
       add(){
          this.$store.commit('news/addNum')
       },
       addServe(){
         this.$store.dispatch('sports/addServe')
       },
       addUser(){
         this.$store.commit('user/addNum')
       }
     }
  }
</script>
<style>
</style>

node 服务器app.js

//引入express
const express = require('express') 
//创建app应用
let app = new express()
//处理get请求
app.get('/add',function(req,res){
    res.send({
        a:10
    })
})
//监听3000端口
app.listen(3000,function(){
    console.log('3000端口')
})