vue.js---状态管理与Vuex

vue.js组件的数据和方法只有在它们所在的组件中可以互通的方位和使用，其他组件是无法读取和修改的。但是在实际业务中，经常有跨组件共享数据的需求，因此Vuex的设计就是用来统一管理组件状态的，它定义了一系列规范来使用和操作数据，使组件应用更加高效。
1、引入Vuex，基本配置：
npm install –save vuex
在main.js中引用
import Vuex from ‘vuex’
Vue.use(Vuex)

const store = new Vuex.Store({//vuex的配置})

new Vue({
//其他设置
store:store
})
仓库store包含了应用的数据（状态）和操作过程。Vuex里的数据都是响应式的，任何组件使用同一store的数据时，只要store的数据变化，对应的组件也会立即更新。
2、使用
const store = new Vuex.Store({
state:{
count:0
}
});
在任何组件内，可以直接通过$store.state.count来引用，如果觉得不够优雅，也可以用一个计算属性来显示：

<script>
    export default {
        computed: {
            count () {
                return this.$store.state.count;
            }
        }
    }
</script>

完整示例：

//index.vue
<template>
    <div>
        <h1>首页</h1>
        {{ count }}
        <button @click="handleIncrement">+1</button>
        <button @click="handleDecrease">-1</button>
        <button @click="handleIncrementMore">+5</button>
        <div>{{ list }}</div>
        <div>{{ listCount }}</div>
        <button @click="handleActionIncrement">action +1</button>
        <button @click="handleAsyncIncrement">async +1</button>
    </div>
</template>
<script>
    export default {
        computed: {
            count () {
                return this.$store.state.count;
            },
            list () {
                return this.$store.getters.filteredList;
            },
            listCount () {
                return this.$store.getters.listCount;
            }
        },
        methods: {
            handleIncrement () {
                this.$store.commit('increment');
            },
            handleDecrease () {
                this.$store.commit('decrease');
            },
            handleIncrementMore () {
                this.$store.commit('increment', 5);
            },
            handleActionIncrement () {
                this.$store.dispatch('increment')
            },
            handleAsyncIncrement () {
                this.$store.dispatch('asyncIncrement').then(() => {
                    console.log(this.$store.state.count);
                });
            }
        }
    }
</script>

//main.js
const store = new Vuex.Store({
    //这里面方数据，在组件中使用this.$store.state.xxx调用
    state: {
        count: 0,
        list: [1, 5, 8, 10, 30, 50]
    },
    //类似于java的getter，统一的计算属性，在组件中使用this.$store.getters.xxx调用
    getters: {
        filteredList: state => {
            return state.list.filter(item => item < 10);
        },
        listCount: (state, getters) => {
            return getters.filteredList.length;
        }
    },
    //相当于setter，从这里面修改数据的值，在组件中使用this.$store.commit调用
    mutations: {
        increment (state, n = 1) {
            state.count += n;
        },
        decrease (state) {
            state.count --;
        }
    },
    //通常业务方法放在这里面，比如异步的方法，使用在组件中使用this.$store.dispatch调用
    actions: {
        increment (context) {
            context.commit('increment');
        },
        asyncIncrement (context) {
            return new Promise(resolve => {
                setTimeout(() => {
                    context.commit('increment');
                    resolve();
                }, 1000)
            });
        }
    }
});

vue.js---状态管理与Vuex

猜你喜欢