Vuex的使用

一. 组件传参

1. 父子组件

1. 父组件 ==> 子组件 通过在子组件自定义属性props,来接收参数实现传参

   <script>
   	// 绑定边界
   	new Vue({
   		el: '#app',
   		components: {
   			'my-button': {
   				props: ['m'],
   				template: '<button @click="do_sub">{{m}}提交{{n}}次</button>'
   				data() {
   					return {
   						n: 0
   					}
   				},
   				methods: {
   					do_sub() {
   						this.n++;
   					}
   				}
   			}
   		},
   		data() {
   			return {
   			}
   		}
   	})
   </script>
   

2. 子组件 ==> 父组件 通过在子组件中自定义事件this.$emit('事件名', 参数1,参数2);实现传参

   <div id="app">
   	<my-button m='zs' @three-click='do_three'></my-button>
   	<my-button m='王五' @four-click='do_four'></my-button>
   </div>
   <script>
   	// 绑定边界
   	new Vue({
   		el: '#app',
   		components: {
   			'my-button': {
   				props: ['m'],
   				template: '<button @click="do_sub">{{m}}提交{{n}}次</button>',
   				data() {
   					return {
   						n: 0
   					}
   				},
   				methods: {
   					do_sub() {
   						this.n++;
   						var name = 'ww';
   						var sex = '男';
   						var hobby = '小姐姐';
   						// 通过自定义事件来完成
   						if (this.n % 3 == 0)
   							this.$emit('three-click', name, sex, hobby);
   						
   						if (this.n % 4 == 0)
   							this.$emit('four-click', name, hobby);
   					}
   				}
   			}
   		},
   		methods: {
   			do_three(a, b, c) {
   				console.log(a, b, c);
   			},
   			do_four(a, b, c) {
   				console.log(a, b, c);
   			}
   		},
   		data() {
   			return {
   			}
   		}
   	})
   </script>
   
   

2. 总线

1. 在main.js的Vue实例中添加一个Vue作为总线
2. 在总线中自定义事件this.$root.BUS.$emit('doCollapsed', this.collapsed);
3. 通过对事件的监听取得参数

   this.$root.BUS.$on('doCollapsed', v => {
     // v 指的是TopNav传递过来的
     this.collapsed = v;
   })
   

二. Vuex

1. 介绍

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以想象为一个“前端数据库”（数据仓库），让其在各个页面上实现数据的共享包括状态，并且可操作

2. Vuex中的4个js

1. state 用于集中管理整个Vue项目中的所有变量
2. getters 操作变量,相当于get方法
3. mutations 操作变量,相当于set方法
4. actions mustations的升级版.mustations操作变量,是同步操作,action是异步操作
   

3. Vuex的使用

1. Vuex安装

   • npm install vuex -S
   • npm i -S vuex@3.6.2

2. 在src目录下创建store模块
   创建actions.js,getters.js,mutations .js,state .js,index.js
   其中index.js负责新建Vuex的store实例,注册并引入以上各大模块

   import Vue from 'vue'
   import Vuex from 'vuex'
   import state from './state'
   import getters from './getters'
   import actions from './actions'
   import mutations from './mutations'
   Vue.use(Vuex)
   const store = new Vuex.Store({
    	state,
    	getters,
    	actions,
    	mutations
    })
    export default store
   

3. 在main.js中导入并引用到Vue实例中

   import store from './store'
   
   new Vue({
     el: '#app',
     data() {
       return {
         BUS: new Vue({})
       }
     },
     router,
     store,
     components: {
       App
     },
     template: '<App/>'
   })
   

4. Vuex的取值

1. 直接取值

   1. 在state中定义

      export default{
        str: 'hello'
      }
      

   2. 取值

      this.$store.state.str;
      

   3. 数据显示

      <h1>直接取值==>{{msg}}</h1>
      

   4. 效果
      

2. getters取值

   1. 在state中定义

      export default{
        str: 'hello'
      }
      

   2. 在getters中定义方法

      export default{
      	getStr: function(state) {
          return state.str;
        }
      }
      

   3. 数据显示

      <h1>getters取值==>{{msg2}}</h1>
      

   4. 取值

      this.$store.getters.getStr;
      

   5. 效果
      

3. mutations改变值

   1. 在state中定义

      export default{
        str: 'hello'
      }
      

   2. 在mutations中定义方法

      export default{
        setName: function(state, payload) {
          // playload 载荷
          state.str = playload.str;
        }
      }
      

   3. 定义按钮绑定事件来更改str的值

      doSub() {
        this.$store.commit('setName', {
          str: '你好'
        })
      }
      

   4. 按钮

      <button @click="doSub">mutations改变值</button>
      

   5. 效果
      
      

4. actions改变值

   1. 在state中定义

      export default{
        str: 'hello'
      }
      

   2. 在actions中定义方法

      export default{
        setStrAsync: function(context, payload) {
          // context 值得是vuex的实例
          // 等价于 this.$store
          setTimeout(function() {
            context.commit('setName', payload);
          }, 6000);
        }
      }
      

   3. 定义按钮绑定事件来更改str的值

      doSub2() {
        this.$store.dispatch('setStrAsync', {
          str: '欢迎'
        })
      }
      

   4. 按钮

      <button @click="doSub2">actions改变值</button>
      

   5. 效果
      

5. mutations和actions
   更改mutations中的方法

   export default{
     setName: function(state, payload) {
       // playload 载荷
       setTimeout(function() {
         state.str = payload.str;
       }, 6000);
     }
   }
   

   之后
   先点击mutations后点击actions会在mutations中的方法执行完后在执行actions中的方法
   先点击actions后点击mutations会在actions中的方法执行过程中执行mutations中的方法直到执行完成在继续执行actions中的方法

6. actions中发送ajax获取后台数据

   1. 在actions中定义方法

      setStrAjax: function(context, payload) {
        let _this = payload._this;
        let url = _this.axios.urls.VUEX_INFO;
        let params = {
          resturantName: 'hello'
        }
        _this.axios.get(url, {params: params}).then(e => {
          if (e.data.success) {
            context.commit('setStr', {
              str: e.data.msg
            })
          }
        }).catch(err => {
          console.log(err)
        })
      }
      

   2. 定义按钮绑定事件
      传入参数时将this传入

      doSub3() {
        this.$store.dispatch('setStrAjax', {
          _this: this
        })
      }
      

   3. 按钮

      <button @click="doSub3">actions发送ajax改变值</button>