vuex中module使用

1.store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 1 下载vuex 导入 use一下
// 2 new Vuex.Store
// 3 挂载到new  vue上
export default new Vuex.Store({
  state: {
    // 在这里写的就是所有组件都能有 全局数据了
    // 名字:值
    // 如果我1000个全局数据 有可能重名
    count:100
  },
  mutations: {
    countMutation(state){
      // state 就是那个全局state
      console.log('mutation触发了',state)
      state.count++
    }
  },
  actions: {
    // action对应的函数
    countAction(obj){
      console.log('action触发了',obj)
      // obj对象 里面有commit
      obj.commit("countMutation")
    }
  },
  // modules 在store全局数据 是可以来分模块管理的
  // 他可以用来区分每个不同模块的数据
  // 15:10 上课
  modules: {
    // 模块:{  一套state action mutation }
    m1: {
      namespaced: true,//开启命名空间大白话 他是m1下的 不会影响其他人

      // 模块内容（module assets）
      state: { // 模块内的状态已经是嵌套的了，使用 `namespaced` 属性不会对其产生影响
        m1Name:"我是m1模块的m1Name"
      }, 
      actions: {
        loginAction () { 
            console.log('m1的action')
        } // -> dispatch('m1/loginAction')
      },
      mutations: {
        loginMutation () { 
          console.log('loginMutation-执行啦')
        } // -> commit('m1/loginMutation')
      }
    },
    home:{
        namespaced: true,
        state:{
          count:1
        }
    },
    about:{
      namespaced: true,
        state:{
          count:100
        },
        actions:{

        }
        // 。。。刚刚的可以每个来一套
    },
    // 数据可以再写 user用户模块  system 系统模块
  }
})

2. Demo.vue

<template>
  <div class="home">
     <!-- home啊
     <hr>
     {
   
   {$store.state.m1.m1Name}}
    <button @click="add">点击</button> -->

    <!-- <hr> -->
    <!-- <my-swiper :list="list"></my-swiper> -->

    <button @click="getAll">发送请求</button>

    home组件啊
    <hr>
    <h1>count的值:{
   
   {$store.state.count}}</h1>
    <button @click="addCount">让全局count+1</button>
    <hr>
    <h2>m1下的全局数据 {
   
   {$store.state.m1.m1Name}} </h2>
     <button @click="add">点击修改某个模块的数据</button>

     <!-- 3 哪个组件要用 就直接 使用注册的组件标签名 -->
     <hr>
     <!-- 用组件 传了list数据进去 -->
     <my-swiper :list="list"></my-swiper>
     
  </div>
</template>


<script>
// 要在组件使用全局数据 
// 1 在html范围 直接 $store.state.名字
// 2 在js范围  this.$store.state.名字

// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import {  mapMutations , mapActions ,mapState } from 'vuex'
export default {
  name: 'Home',
  components: {
    // HelloWorld
  },
  data(){
    return {
      list:[
             {id:1,src:'http://122.51.238.153/images/1.jpg'},
             {id:2,src:'http://122.51.238.153/images/2.jpg'},
             {id:3,src:'http://122.51.238.153/images/3.jpg'},
             {id:4,src:'http://122.51.238.153/images/4.jpg'}
           ]
    }
  },
  created(){
    console.log('created')
    console.log('store',this.$store)
  },
  mounted(){
    console.log("home 的 mounted")
  },
  methods:{
    // 这句话的意思是 直接 解构出 全局 m1模块下的 loginMutation 
    // 把loginMutation 放到this上 并且帮你写好了 commit
    // 相当于帮你简化了代码
     ...mapMutations('m1', ['loginMutation']),
    //不是modules的直接写  ...mapMutations( ['loginMutation'])
     add(){
      //  console.log('add',this)
      //   console.log('add',this.$route.meta)
      //  this.$store.commit("m1/loginMutation")
      // 或者下面的  先mapMutations 相当于帮你写了commit
      this.loginMutation()
      // this.$store.commit("m1/loginMutation")
      // 和刚刚的思路 就是加上一个模块前缀 m1/ 
      // this.$store.dispatch("m1/loginAction")
     },
     async getAll(){
      //  http://localhost:8080/
      // 请求 http://122.51.238.153/getok.php
      //  let res=await this.$http.get("http://122.51.238.153/getok.php")
      //  console.log('res',res)
      let res=await this.$http.get("/api/getok.php")
      console.log('res',res)
     },
     addCount(){
        //  让全局数据count+1
        // 1 正常情况 
        // dispatch 触发action
        // -》commit触发mutation
        // -》在mutation修改全局数据
        //2 其他情况 可以直接跳过action 但是必须mutation修改
        // console.log('$store',this.$store)
        // this.$store.dispatch( 'countAction' )
        this.$store.commit("countMutation")
      }
  }
}
</script>