vue 组件传参和方法调用 vuex bus ajax

父单向传子 pro :bb bus路线监听 vm.$on

<template>
  <div>
    <div>尾部</div>
    <div>{{str}}</div>
    <!-- <foothead :bb="'你好地方'"></foothead> -->
    <foothead ref='foot' v-for="item in arr" :key="item" :bb='item' @st='cc'></foothead>
    <button @click="t">父调用子的方法</button>
   
  </div>
</template>

<script>
import { bus, vm } from "../aa/bus.js";
import foothead from "./other/foothead";
export default {
  name: "",
  components: {
    foothead
    // foothead: resolv => requir(["./other/foothead.vue"], resolv)//嵌套使用加载不出内容
  },
  data() {
    return {
      str: "",
      arr: [1, 2, 3]
    };
  },

  methods: {
    cc: val => {
      console.log(val);
    },
    t() {
      this.$refs.foot[0].but(); //父调用子  this.$refs.foot[0].but(); //父调用子
    }
  },
  created() {
    vm.$on(bus, str => {
      this.str = str;
    });
  }
};
</script>

<style>
</style>

子传父 @st='cc’

<template>
  <div>
    <div>内容多多多多</div>
    <div>{{bb}}</div>
    <button @click="but">父传子</button>
  </div>
</template>

<script>
export default {
  name: "",

  data() {
    return {
      msg:'父传子'
    };
  },
  props:['bb'],

//  props: {
//     bb: {
//     type: String,
//     default: function () { return [] }
//     default: () => ''
//   },
// }


  methods: {
  but(){
    this.$emit('st',this.msg)
  },
  }
};
</script>

<style>
</style>

bus路线监听 vm.$emit

<template>
  <div>
    <div>头部</div>
    <button @click="bnt">头部</button>
    <router-link :to="{path:'/home'}">home</router-link>
  </div>
</template>

<script>
import { bus, vm } from "../aa/bus.js";
export default {
  name: "",

  data() {
    return {};
  },

  methods: {
    bnt() {
      vm.$emit(bus, "你好");
    }
  }
};
</script>

<style>
</style>

bus.js

import Vue from 'vue'
export const bus = 'bus'
export const vm = new Vue()

vuex

new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    <div>{{ count }}</div>
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
})

使用store作为中间仓库

<template>
    子组件2
  <div>{{secondInfo}}</div>
</template>

<script>
import Store from './store'
export default {
    name: 'second', 
    data() {
        return {
            this.secondInfo: null
        }
    },
  created(){
      Store.$on('fromFirst', (info) => {
          this.secondInfo = info
      })
  }
}
</script>

<template>
    <div @click='hanleClick'>子组件1</div>
</template>

<script>
import Store from './store'

export default {
    name: 'first',
    methods: {
        handleClick() {
            Store.$emit('fromFirst', '来自子组件1的传值')
        }
    }
}
</script>

import Vuex from 'Vuex'
Vue.use(Vuex);
let store = new Vuex.Store({
  state: {
    num: 1
  },
  getters: {
    num: state => {
      return state.num*2
    }
  },
  mutations: {
    increment (state) {
      // mutate state
      state.num++
    }
  },
  actions:{
    increment1 ({ commit }) {
      setTimeout(()=>{
        commit('increment')
      },3000)
    },
    // increment (context) {
    //   context.commit('increment')
    // }
  }
})
new Vue({
  el: '#app',
  store,
  router,
  render: h => h(App)
})

数据监听 mounted生命周期钩子中执行如下：

export default {
   state: {},
   mutations: {},
   getters: {},
   actions: {}      
  }

import vuex from "vuex";
import user from './module/user'
Vue.use(vuex);
var store = new vuex.Store({
  //store对象
  state: {
    count: 222,
    vuexarr: []
  },
  mutations: {
    increment(state, payload) {
      state.count = payload;
    },
    add(state, payload) {
      state.vuexarr = payload;

    }
  },
  actions: {
    increment(context) {
      context.commit("increment");
    }
  },
    modules: {
    user
   }
});
new Vue({
  el: "#app",
  router,
  store, //实例挂载
  components: { App },
  template: "<App/>"
});

命名空间 https://vuex.vuejs.org/zh/guide/modules.html

<template>
  <div>
    tabr--{{t}}---{{$store.state.count}}
    <div>{{count}}</div>
    {{vuexarr}}
  <div></div>
  </div>
</template>

<script>
import {mapState,mapMutations,mapActions} from 'vuex';
export default {
  data () {
    return {
      t:'',
      vuexstorage:''
    }
  },
  computed:{
   ...mapState(['count','vuexarr'])
  },

  methods: {
    ...mapMutations(['increment'])
    ...mapActions([ 'increment']),
  },
  created() {
    this.t = this.$route.query.tt;
    this.vuexstorage=this.count;
    this.increment(3)

  }
}

</script>

<style >

</style>

参考:https://vuex.vuejs.org/zh/

组件懒加载

 component: resolve => require(['@/components/router/home'], resolve)
  component: ()=>import("@/components/router/home")
 

vuex其他调用

this.$store.state.count//数据
this.$store.getters//数据
this.$store.commit('increment', 1);
this.$store.dispatch('increment', true);

vuex 数据变化 在其他组件监控

//利用计算属性
  computed: {
    listData() {
      return this.$store.state.listData;
    }
  },
  //监听执行
  watch: {
    listData(val) {
     写上你需要的东西
    }
  }

actions 请求ajax

// 异步处理
import Axios from "axios";
const actions = {
  message() {
    return Axios.request({
        url: "/ajax/user/wx/information/detail",
        method: "get",
        params: {
          contentId: 408,
        },
      })
      .then((res) => {
        return Promise.resolve(res);
      });
  },
};

   this.$store.dispatch('message', true).then(res=>{
      console.log(res,'===================')
    })


  import { mapActions } from "vuex";
    methods: {
    ...mapActions(["message"])
  },
  this.message().then(res => {
     console.log(res, "==================");
     });

import Store from 'vuex'

Vue.use(Store)

const store = new Vuex.Store({
  state: {
    data: 'this is data'
  },
  mutations: {
    SET_DATA(state, data) {
      state.data = data
    }
  },
  actions: {
    setData({ commit }, data) {
      commit('SET_DATA', data)
    }
  }
})

new Vue({
  render: h => h(App),
  router,
  store
})

<div>{{$store.state.data}}</div>

this.$store.commit('SET_DATA', 1);

this.$store.dispatch('setData', 'this is update data')

vuex 模块化

const moduleA = {
  state: {
    data: 'this is a'
  },
  mutations: {
    SET_DATA(state, data) {
      state.data = data
    }
  },
  actions: {
    setData({ commit }, data) {
      commit('SET_DATA', data)
    }
  }
}
const moduleB = {
  state: {
    data: 'this is b'
  },
  mutations: {
    SET_DATA(state, data) {
      state.data = data
    }
  },
  actions: {
    setData({ commit }, data) {
      commit('SET_DATA', data)
    }
  }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

<div>{{$store.state.a.data}}</div>
<div>{{$store.state.b.data}}</div>
<button @click="update('a')">update a</button>
<button @click="update('b')">update b</button>

update(ns) {
  this.$store.dispatch(`setData`, `update ${ns}`)
}

const moduleA = {
  namespaced: true,
  state: {
    data: 'this is b'
  },
  mutations: {
    SET_DATA(state, data) {
      state.data = data
    }
  },
  actions: {
    setData({ commit }, data) {
      commit('SET_DATA', data)
    }
  }
}

update(ns) {
  this.$store.dispatch(`${ns}/setData`, `update ${ns}`)
}

this.$store.commit('XXX/SETXXX',sth);

// 空间模块展示

{{$store.state.moduleB.countA}}
this.$store.commit("moduleB/setadxx", 66);
this.$store.dispatch("moduleB/message");