vuex的使用

目录

一:组件传参

        1.1父传子

        1.2子传父

        1.3总线

二：vuex

        2.1 vuex的介绍

        2.2 vuex的各个js的用途

        2.3 vuex各个js文件的使用

        2.4vuex异步ajax设值

---

一：组件传参

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>

1.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>

1.3总线

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

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

 

   方法1: 用组件之间通讯。这样写很麻烦，并且写着写着，估计自己都不知道这是啥了，很容易写晕。

   方法2: 我们定义全局变量。模块a的数据赋值给全局变量x。然后模块b获取x。这样我们就很容易获取到数据

二. Vuex

1. 介绍

因为如果很多组件之间传值的话需要很多自定义事件不太好管理 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以想象为一个“前端数据库”（数据仓库），让其在各个页面上实现数据的共享包括状态，并且可操作 方便管理

2.2 vuex中各个js的用途

   Vuex分成五个部分：

   1.State：单一状态树

   2.Getters：状态获取

   3.Mutations：触发同步事件

   4.Actions：提交mutation，可以包含异步操作

   5.Module：将vuex进行分模块

变量传值的演变形式

 

图解Vuex各组件

官方图解Vuex

 

. vuex使用步骤 

  3.1 安装

      npm install vuex -S

       npm i -S vuex@3.6.2     //如果是vue2 就按vuex3 vue3就安vuex4 这两个是版本不同 版本不同会报错

  3.2 创建store模块，分别维护state/actions/mutations/getters

      store

        index.js

        state.js

        actions.js

        mutations.js

        getters.js

用index.js整合这四个js

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

 

把vuex实例挂载到vue实例上 

  3.4 在main.js中导入并使用store实例

import store from './store'

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

整个main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
//开发环境下才会引入mockjs
//在开发环境：true&& require('@/mock') 
//在生产环境：false&& require('@/mock')
 //process.env.MOCK在不同环境下的意义不一样
// process.env.MOCK && require('@/mock') 
// 新添加1
import ElementUI from 'element-ui' 
// 新添加2，避免后期打包样式不同，要放在import App from './App';之前
import 'element-ui/lib/theme-chalk/index.css' 
import App from './App'
import router from './router'
import store from './store'
// 新添加3
Vue.use(ElementUI) 
Vue.config.productionTip = false

import axios from '@/api/http'                 
import VueAxios from 'vue-axios' 

Vue.use(VueAxios,axios)


/* eslint-disable no-new */
new Vue({
  el: '#app',
  data(){
	  return{
		  //总线
		  BUS:new Vue({})
	  }
  },
  router,
  store,
  components: { App },
  template: '<App/>'
})

3.5 开始使用 按要求编码，即可使用vuex的相关功能

4. vuex的核心概念：store、state、getters、mutations、actions

  4.0 store

      每一个Vuex应用的核心就是store(仓库),store基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。

      const store = new Vuex.Store({

       state,    // 共同维护的一个状态，state里面可以是很多个全局状态

       getters,  // 获取数据并渲染

       actions,  // 数据的异步操作

       mutations  // 处理数据的唯一途径，state的改变或赋值只能在这里

      })

2.3 vuex各个组件的使用

page1.vue

<template>
	<div>
		<h1>这是页面1===={{msg}}</h1>
		<p>state直接取值</p>
		<button @click="func1">state直接取值</button>
		<p>getters拿值</p>
		<button @click="func2">getters直接取值</button>
		<p>mutations同步设值</p>
		<button @click="func3">mutations同步设值</button>
		<p>actions异步设值</p>
		<button @click="func4">actions异步设值</button>
		<p>后台ajax异步设值</p>
		<button @click="func5">后台ajax异步设值</button>
	</div>
</template>

<script>
export default {
  data () {
    return {
      
    }
  },
  methods:{
	  func1(){
		  this.msg=this.$store.state.name;
	  },
	  func2(){
		  this.msg=this.$store.getters.getName;
	  },
	  func3(){
		  this.$store.commit('setName',{
			  name:'卡密尔'
		  })
	  },
	  func4(){
		  this.$store.dispatch('setNameAsync',{
		  	  name:'卡密尔king'
		  })
	  },
	  func5(){
		  this.$store.dispatch('setNameAjax',{
			  _this:this
		  })
	  }
  },
  computed:{
	  msg(){
		  return this.$store.state.name;
	  }
  }
}
</script>

<style>
</style>

Page2.vue

<template>
	<div>
		<h1>这是页面2===={{msg}}</h1>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				msg: null
			}
		},
		computed:{
			  msg(){
				  return this.$store.state.name;
			  }
		},
		created() {
			this.msg = this.$store.state.name;	
		}
	}
</script>

<style>
</style>

state.js

export default{
	name:'贾克斯'
}

getters.js

export default{
	getName:function(state){
		return state.name;
	}
}

mutations.js

export default{
	setName:function(state,payload){
		// payload 载荷 实际上是一个json对象 给state里的属性赋值 state.xxx=payload.xxx;
		state.name=payload.name;
	}
}

actions.js

export default {
	setNameAsync: function(context, payload) {
		// context 指的是vuex实例 也就是等价于this.$store
		setTimeout(function() {
			context.commit('setName', payload);
		}, 6000);
	},
	setNameAjax: function(context, payload) {
		let _this=payload._this;
		let url = _this.axios.urls.VUEX_INFO;
		let params = {
			resturantName: '琪亚娜'
		}
		_this.axios.get(url, {
			params: params
		}).then(resp => {
			if (resp.data.success) {
				context.commit('setName', {
					name: resp.data.msg
				})
			}
		}).catch(err => {

		})
	}
}

异步axios使用 （因为这四个js依赖拿不到vue实例 所以得传进去 通过json对象传 且每个js文件中都有一个state参数 并且不用传值给state）

代码区中有 把后台接口放到action.js里 然后在actions里发axios请求

效果图