vue-状态管理一

44次阅读

共计 4928 个字符,预计需要花费 13 分钟才能阅读完成。

vue 状态管理(一)

父子组件之间往往使用 props$emit 实现数据共享,任意组件可通过 bus(一个 vue 实例) 作为桥梁,实现数据共享。当项目中组件越来越多时,组件之间的数据共享变得复杂,难以维护。使用 Vuex 可 集中管理 组件之间的数据(状态),使组件之间的 数据共享 变得简单。

父子组件间通信

父→(props)子组件;子→($meit)父组件,即子组件自定义一个事件,在父组件中监听该事件。

自定义输入组件:

<template>
    <input @input="handleInput" :value="value" :placeholder="placeholder" />
</template>
<script>
    export default {
        name: "CustomInput",
        //props 接收父组件传递过来的数据
        props: {
            value: {type: [Number, String],
                required: true,
                default: ""
            },
            placeholder: {
                type: String,
                default: "提示文本"
            }
        },
        methods: {handleInput(event) {
                let val = event.target.value;
                // 子组件的事件监听函数中触发一个自定义事件
                this.$emit("customInput", val);
            }
        }
    };
</script>

使用组件:

<template>
    <div class="store">
        <!-- props 传递值 -->
        <custom-input :value="value" @customInput="handleInput" :placeholder="placeholder" />
        <p v-text="value"></p>
    </div>
</template>
<script>
    import CustomInput from '_c/CustomInput.vue'
    export default {
        name: 'Store',
        components: {CustomInput},
        data() {
            return {
                value: '',
                placeholder: '自定义事件传递值'
            }
        },
        methods: {
            //  自定义事假处理器
            handleInput(val) {this.value = val}
        }
    }
</script>

因为 v-model 指令是双向绑定的,我们也可以用其来实现值的传递:

<template>
    <div class="store">
        <custom-input v-model="inputValue" :placeholder="placeholder" />
        <p v-text="inputValue"></p>
    </div>
</template>
<script>
    import CustomInput from '_c/CustomInput.vue'
    export default {
        name: 'Store',
        components: {CustomInput},
        data() {
            return {
                inputValue: '',
                placeholder: 'v-mode 传递值'
            }
        }
    }
</script>

bus 任意组件通信

创建一个空的 vue 实例,然后将该实例添加到 vue 的原型上,通过该实例 触发事件 监听事件 来在不同组件之间共享数据。

//bus.js
import Vue from "vue";
let Bus = new Vue();
export default Bus;

在 main.js 中添加原型属性:

import Bus from './lib/bus'
// 通过 bus 实现任意组件传递参数
Vue.prototype.$bus=bus
//ChildPage.vue
<template>
    <div id="child-page">
        <h1>{{msg}}</h1>
        <h3 v-text="data"></h3>
    </div>
</template>
<script>
    export default {
        name: "ChildPage",
        data() {
            return {
                msg: "I am child",
                data: ""
            };
        },
        mounted() {
            // 在挂载声明周期函数中监听自定义事件
            this.$bus.$on("customEvent", data => {this.data = data;});
        }
    };
</script>
<template>
    <div id="app">
        <button @click="sendData"> 给 child 传递数据 </button>
        <p v-text="num"></p>
    </div>
</template>

<script>
    export default {
        name: "App",
        data() {return { num: 0}
        },
        methods: {sendData(data) {
                // 由 bus 触发一个事件,在接收数据的组件中监听该事件
                this.$bus.$emit('customEvent', ++this.num);
            }
        }
    };
</script>

Vuex 状态管理

随着组件的增加,通过以上方式共享数据,会越来越复杂,vue 提供了状态管理插件 Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式;集中存储和管理应用的所有组件状态。

理解:

  • 状态:数据,相当于组件内部的data 的返回值,Vue 是数据驱动的,数据变化往往会表现在视图层;
  • 集中存储:Vue 只关注视图层,Vuex 提供了一个仓库(store)来保存数据,使得数据和视图分离;
  • 管理:处理保存数据,还可计算、处理数据;
  • 所有组件状态:所有组件都可获取仓库中的数据,即一个项目只有一个数据源。

Vuex 文档中说:

通过定义和 隔离 状态管理中的各种概念并通过强制规则维持视图和状态间的 独立性,我们的代码将会变得更结构化且易维护。

Vuex 就是通过隔离数据、拆分改变数据的方式使得数据和视图独立,数据被组件数共享。

虚线内部的三个部分组成了一个 Store, 组件的数据保存在 State 中,用户和组件交互时,通过组件内的方法分发(dispatch)一个动作(action,有点像事件),动作会提交(Commit)一个更改(Mutation,也类似事件),改变 State 中的数据,然后获取数据渲染到视图上。

  • actions 可以是 异步操作,故可在 action 中调用后台接口获取新的数据;
  • mutations 只能是 同步操作;
  • mutations 和 actions 都可直接更改 state,但是当 action 含有异步操作时,会使得数据变化混乱,难以跟踪,使得调试困难;
  • 基于以上原因,Vuex 规定只能是 mutations 来改变 state。
  • 在开发工具中也可提交 mutations。

使用 vuex

//main.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);// Vuex 是 Vue 的插件

let store = new Vuex.Store({
    state: {     // 放置 state 的值
        count: 0,
        str:"abcd234"
    },
      getters: {   // 放置 getters 方法
          strLen: state => state.str.length
      },
      // mutations 只能是同步操作
      mutations: {   // 放置 mutations 方法
       increment(state, payload) {
          // 在这里改变 state 中的数据
          state.count = payload.number;
       }
      },
      // actions 可以是异步操作
      actions: {      // 放置 actions 方法
           actionName({commit}) {
              //dosomething
             commit('mutationName')
           },
           getSong ({commit}, id) {
                      // 请求后台数据
              api.getMusicUrlResource(id).then(res => {let url = res.data.data[0].url;
              })
              .catch((error) => {  // 错误处理
                  console.log(error);
             });
          }
    }
});

new Vue({
  el: '#app',
  store  //  通过 this.store 访问 store
});

我们看看 Vuex 和 store 是什么?

Vuex:

Vuex 它实际上是一个对象,里面包含了 Store 这一构造函数,还有几个 mapActions、mapGetters、mapMutations、mapState、install 方法。

store:

store 是 Vuex 的实例(废话)。

实际项目中往往将 store 单独放置的一个文件夹在,mutations、getters、actions 等属性各自用一个文件保存。

state

state 对象的属性时 Vuex 管理的状态,类似单个组建的 data。

访问 getters:

  1. this.$store.state
  2. 使用 mapState 映射成计算属性,推荐
//state.js
export default {
    count: 100,
    name: 'Jack*Zhou',
    firstName: 'Jack',
    lastName: 'Zhou',
    age: 24,
    profession: 'web deveploper',
    company: 'Baidu'
}

组件:

import {mapState} from 'vuex'
export default {data(){
        return {localCount:0}
    },
    computed: {localCount() {return this.$store.state.count + 1;},
            // 计算属性名和 state 属性名相同: 传入数组
            // ...mapState(['count','name']),
            // 计算属性名和 state 属性不同,传入对象
            ...mapState({
                name: state => state.name,
                count: state => state.count,
                countAlias: 'count',
                // 为了使用 this 不能使用箭头函数
                countPlusLocalCount(state) {return state.count + this.localCount;}
            })
        },
}

getters

getters 是对 state 的加工,类似于组件中的 data 和计算属性的关系。getters 的返回值会被缓存起来,只有当它的依赖改变,才会重新计算。

访问 getters:

  1. this.$store.getters
  2. 使用 mapGetters 将 getters 映射成计算属性,推荐
  3. 方法访问,不会缓存。
// getters.js
export default {
    fullName: state => state.firstName + ' ' + state.lastName,
    // 在 getters 中访问 getters
    info: (state, getters) => {return state.age + ',' + getters.fullName;},
    // 为了传递参数,返回一个函数,personInfo: (state, getters) => (city) => {
        return {
            name: getters.fullName,
            age: state.age,
            company: state.company,
            city
        }
    }
}

使用 getters:

import {mapGetters} from 'vuex'
export default {
    name: 'Store',
    computed: {...mapGetters(['fullName', 'info', 'personInfo']),
        myInfo() { return this.personInfo('杭州') },
        ...mapGetters({
            fullNameAlias1: 'fullName',
            // 不能写成函数
            // fullNameAlias2(state){
            //     return state.name+',你好'+this.$store.getters.fullName;
            // }
        })
    },
    mounted() {console.log(this.personInfo('成都'))
        console.log(this.myInfo)
    }
}

参考

  • 理解 Vuex,看这篇就够了
  • vuex 文档

正文完
 0