Vuex

mac2022-06-30 83

1. vue中各个组件之间传值 1.父子组件父组件-->子组件，通过子组件的自定义属性：props 子组件-->父组件，通过自定义事件：this.$emit('事件名',参数1,参数2,...);

2.非父子组件或父子组件通过数据总数Bus，this.$root.$emit('事件名',参数1,参数2,...)

3.非父子组件或父子组件更好的方式是在vue中使用vuex

方法1: 用组件之间通讯。这样写很麻烦，并且写着写着，估计自己都不知道这是啥了，很容易写晕。方法2: 我们定义全局变量。模块a的数据赋值给全局变量x。然后模块b获取x。这样我们就很容易获取到数据

2. Vuex 官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以想象为一个“前端数据库”（数据仓库），让其在各个页面上实现数据的共享包括状态，并且可操作 Vuex分成五个部分： 1.State：单一状态树 2.Getters：状态获取 3.Mutations：触发同步事件 4.Actions：提交mutation，可以包含异步操作 5.Module：将vuex进行分模块

3. vuex使用步骤 3.1 安装 npm install vuex -S

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

3.3 在store/index.js文件中新建vuex的store实例，并注册上面引入的各大模块 const store = new Vuex.Store({state,getters,actions,mutations})

3.4 在main.js中导入并使用store实例 new Vue({ el: '#app', router, store, //在main.js中导入store实例 components: { App }, template: '<App/>', data: { //自定义的事件总线对象，用于父子组件的通信 Bus: new Vue() } })

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的改变或赋值只能在这里 })

actions.js

export default { setResturantNameAsync: function(context, payload) { //其实actions还是提交的mutation //mutations中的2个参数 //1)type:事件类型 //2)payload:载荷 setTimeout(function() { context.commit('setResturantName', payload); }, 3000); }, //异步Ajax setResturantNameAsyncAjax: function(context, payload) { let _this = payload._this; let url = _this.axios.urls.SYSTEM_USER_GETASYNCDATA; _this.axios.post(url,{}).then(resp=>{ console.log(resp); }).catch(); } }

mutations.js

export default { // type(事件类型)：用于赋值改变state中的数据,可以理解为set方法 // payload：官方给它还取了一个高大上的名字：载荷，其实就是一个保存要传递参数的容器 setResturantName: (state,payload)=>{ state.resturntName = payload.resturntName; }, }

getters.js

export default{ getResuletName:(state)=>{ return state.resturntName; } }

state.js

export default{ resturntName:'胡歌直播' }

VuePage2.vue

<template> <div> <h1>Page2</h1> <h1>{{msg}}</h1> <h1>从getters中获取stat属性：{{resturntName}}</h1> <div> <button @click="syanc">同步</button> </div> <button @click="staticResuletName">sactions异步获取静态数据</button> <div> <button @click="dostaticResuletName">sactions异步获取动态数据</button> </div> </div> </template> <script> export default { name: 'page2', data() { return { msg: 'Welcome to Your Page2' } }, methods: { syanc: function() { // 1、把载荷和type分开提交 return this.$store.commit('setResturantName', { resturntName: '肯德基' }); }, staticResuletName: function() { return this.$store.dispatch('setResturantNameAsync', { resturntName: '麦当劳' }) }, dostaticResuletName: function() { return this.$store.dispatch('setResturantNameAsyncAjax', { resturntName: '汉堡包', _this:this }) }, }, computed: { resturntName: function() { //不推荐 // return this.$store.state.resturntName; //return this.$store.getters.getResuletName; return this.$store.getters.getResuletName; }, getResuletName: function() { // 1、把载荷和type分开提交 return this.$store.commit('setResturantName', { resturntName: '汉堡包', }); }, // staticResuletName:function(){ // return this.$store.dispatch('setResturantNameAsync',{ // resturntName:'麦当劳' // }) // }, } } </script>  <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>

转载于:https://www.cnblogs.com/xmf3628/p/11466497.html