• vuex 实现vue不同组件之间的状态共享


    一、什么是vuex?

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

    二、为什么要使用vuex?

    一般情况我们可以通过props、$emit在父子组件之间来回穿梭传值?抑或通过bus在组件之间共享值?无论哪种方式,都是极其麻烦或者可读性非常差的。而Vuex的引入很好的解决了这个问题,它把一些共享的属性(状态)集中的管理起来,使得你只需要关注Vuex中定义的state就可以了,state的变化会自动响应到引用了它的视图(页面组件)

    Vuex很好的解决了以下两个问题:

    1、多个视图依赖于同一状态。
    2、来自不同视图的行为需要变更同一状态。

    三、简单示例

    1、安装包

    NPM

    npm install vuex --save
    

    Yarn

    yarn add vuex
    

    2、建议把vuex单独放在一个模块

    src目录下新建 vuex 文件夹 新建 store.js

    import {createStore} from 'vuex';
    const store=createStore({
        state(){
            return{
                count:1
            }
        },
        mutations:{
            increment(state){
                state.count++
            }
        }
    })
    export default store     
    

    3、其它组件中使用

    this.$store.state.count
    this.$store.commit("increment")
    
  • 相关阅读:
    URAL 2015 Zhenya moves from the dormitory(水题)
    概率DP总结(待整理)
    HDU 5236 Article(概率DP+贪心 待解决)
    2015上海邀请赛
    树链剖分(待整理)
    hust 5239 Doom(线段树 规律OR数论 待整理 )
    Java大数BigInteger BigDecimal
    hdu 5505 GT and numbers
    hdu 5532 Almost Sorted Array
    hdu 5533 Dancing Stars on Me
  • 原文地址:https://www.cnblogs.com/qingheshiguang/p/14676250.html
Copyright © 2020-2023  润新知