初探vuex

vuex是什么?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

 

核心概念

state:

state是vuex的唯一数据源,是所有组件的公共data。中上述代码中,我们已经将两个组件的公共数据存入state。在组件中,使用this.$store.state.product获取state中的数据。

getters:

getters用于从state中派生出一些状态,例如对列表进行过滤等。可以将getters理解为计算属性computed,getter的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

mutation:

更改vuex的store中的状态的唯一方法是提交mutation。vuex中的mutation类似于事件:每个mutation都有一个字符串的事件类型和一个回调函数。这个回调函数就是我们实际进行状态更改的地方,并且它会接受state作为第一个参数(payload为第二个参数,也就是自定义参数)。

action:

action类似于mutation,不同之处在于:
action提交的是mutation,而不是直接变更状态。
action可以包含异步操作,而mutation不行。
actions中的回调函数的第一个参数是context, 是一个与store实例具有相同属性和方法的对象.
action通过store.dispatch方法触发,mutation通过store.commit方法提交。

 

demo实例

①创建一个store.js文件

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {// 包含了多个直接更新state函数的对象
        INCREMENT(state) {
            state.count = state.count + 1;
        },
        DECREMENT(state) {
            state.count = state.count - 1;
        }
    },
    getters: {   // 当读取属性值时自动调用并返回属性值
        evenOrOdd(state) {
            return state.count % 2 === 0 ? "偶数" : "奇数";
        }
    },
    actions: { // 包含了多个对应事件回调函数的对象
        incrementIfOdd({ commit, state }) { // 带条件的action
            if (state.count % 2 === 1) {
                commit('INCREMENT')
            }
        },
        incrementAsync({ commit }) { //异步的action
            setInterval(() => {
                commit('INCREMENT')
            }, 2000);
        }

    }
})
export default store //用export default 封装代码,让外部可以引用

②在main.js文件中引入store.js文件

import store from './store'
new Vue({
    el: '#app',
    router,
    store,//注册上vuex的store: 所有组件对象都多一个属性$store
    components: { App },
    template: '<App/>'
})

③新建一个模板HelloWorld.vue

<template>
    <div class="hello">
        <p>click {{count}} times,count is {{evenOrOdd}}</p>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
        <button @click="incrementIfOdd">increment if odd</button>
        <button @click="incrementAsync">increment async</button>
    </div>
</template>
<script>
    export default {
        name: "HelloWorld",
        computed: {
            count() {
                return this.$store.state.count;
            },
            evenOrOdd() {
                return this.$store.getters.evenOrOdd;
            }
        },
        methods: {
            increment() {
                this.$store.commit("INCREMENT");
            },
            decrement() {
                this.$store.commit("DECREMENT");
            },
            // 只有是奇数才加1
            incrementIfOdd() {
                this.$store.dispatch("incrementIfOdd"); //触发store中对应的action调用
            },
            // 过两秒才加1
            incrementAsync() {
                this.$store.dispatch("incrementAsync");
            }
        }
    };
</script>

由于 store 中的状态是响应式的,当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。在组件中调用 store 中的状态简单到仅需要在计算属性中返回即可。改变store 中的状态的唯一途径就是显式地提交 (commit) mutations。

本文来自投稿,不代表微擎百科立场,如若转载,请注明出处:https://www.w7.wiki/develop/3039.html

发表评论

登录后才能评论

评论列表(1条)