前端框架Vue----vuex集中式状态管理

全局事件总线

用于任意组件间的通信。
定义一个变量

1. 让所有组件均可见===>放Vue原型（Vue.prototype.x = {xxx} ）上

const A = Vue.extend({}) //VueComponent构造函数
const b= new A()
Vue.prototype.x = b

2. 可调用$on $off $emit
   $on，绑定事件
   $off，解绑事件
   $emit，触发事件
   三者均在Vue的原型上

3. 绑定全局事件总线

new Vue({
	el: "#app",//Vue脚手架自己找容器
	render: h=>h(App)，
	beforeCreate(){ //创建Vue实例对象之前
		Vue.prototype.$bus = this // $bus即x
	}
})

全局事件总线案例

1. 定义A组件components/A.vue，并绑定事件

//模板
<template>
	<!--一个根节点-->
    <div>
        <span>A组件</span><br>
    </div>
</template>

//交互
<script>
export default {//暴露组件
    name: 'A', //component name
    components: {}, // sub components
    mounted(){  //组件挂载时
        //通过  全局事件总线  绑定事件，并接收数据
        //事件名字随意
        this.$bus.$on("hello", (data)=>{console.log("A组件接收数据,", data)})
    },
    beforeDestroy(){
    	//取消事件绑定
    	this.$bus.$off("hello")
    },
}
</script>

2. 定义B组件，绑定事件，去触发A组件的事件

<template>
  <div>
    <span>B组件</span><br>
    <span>{{ name }}</span><br>
    <span>{{ age }}</span><br>
    <button @click="sendData">发送数据</button>
  </div>
</template>

<script>
export default { //默认暴露组件
  name: "B",
  data() {
    return {
      name: "jack",
      age: 23,
    };
  },
  methods: {
    sendData(){
        // 通过全局事件总线，触发事件，并传入数据
        console.log(this.addr)
        //this为组件实例对象，输入自己的数据
        this.$bus.$emit("hello", this.name)
    },
  },
};
</script>

3. 在App组件中管理A B组件

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">

    <A></A>
    <B></B>
  </div>
</template>

<script>
import A from './components/A'
import B from './components/B'
export default {
  name: 'App',
  components: {
    A,
    B, 
  }//然后就可以在模板中使用
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

4. 处理入口文件main.js
   创建Vue实例

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

Vue.config.productionTip = false

new Vue({
  data(){
    return {
      addr: 'bj',
    }
  },
  render: h => h(App),
  // 绑定全局事件总线
  beforeCreate(){//Vue实例对象创建之前
    // 注意是Vue.prototype
    Vue.prototype.$bus = this
  },
}).$mount('#app') 
// #app容器在public/index.html中，Vue脚手架自己找

谁传出数据，谁触发其他组件的事件
然后npm run serve 即可

Vuex

vue2中使用vuex3!!!

1. 集中式----状态（数据）管理----插件
2. 用于Vue中多组件状态共享的集中式管理，适用于任意组件间通信。
   Vuex官网
   
   事件名字全局必须唯一
   
   多组件依赖同一状态；
   多个组件需要变更统一状态；
   此时，使用Vuex

Vuex原理

组件调用Vuex执行流：

Actions中可以发送Ajax请求，组件也可以跳过Actions：

管理者store:

store.dispatch(“hello”, data)
store.commit(“hello”, data)

安装Vuex插件

1. 安装

npm install -g vuex@3
import Vuex from 'vuex'
Vue.use(Vuex) //使用插件

2. 使用Vuex
   在main.js同级，创建vuex目录>store.js
   或者创建store目录>index.js
   index.js
   所有的 import 语句置顶，优先执行

import Vue from 'vue'
import Vuex from 'vuex'
// 创建store实例之前，使用Vuex组件
Vue.use(Vuex)
  
//响应组件的动作
const actions = {}
// 修改状态
const mutations = {}
// 存储数据
const state = {}

// 创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
})

 
在其他组件中使用store

<script>
// import HelloWorld from './components/HelloWorld.vue'
import A from './components/A'
import B from './components/B'
import store from './store'
export default {
  name: 'App',
  components: {
    A,
    B,
  },
  store,
  mounted(){
  	console.log("查看是否具有store", this)
  }
}

此时该组件对象具有$store属性

store的错误

object is not function----版本问题，使用vuex3

＃解决  npm install -s vuex@3

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default {//直接暴露对象
    state:{
        username:""
    },
    actions:{
        testLauf({commit}, data){
            commit("testLauf", data)
        }
    },
    mutations:{
        testLauf(state, data){
            state.username = data
        }
    },
}

// const state = {
//     username: "",
//     password: "",
// }
// const actions = {
//     test({commit}, data){
//         commit("test", data)
//     }
// }

// const mutations = {
//     test(state, data){
//         state.username = data
//     }
// }

// export default new Vuex.Store({
//     state,
//     actions,
//     mutations
// })

router的错误

版本问题，在Vue2中使用需使用vue-router@3 vuex@3