Vuex 状态管理 01

时间:2021-07-11
本文章向大家介绍Vuex 状态管理 01，主要包括Vuex 状态管理 01使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

Vuex 状态管理

Vuex

　　是一套组件状态管理的维护方案，作为插件使用，进一步完善了 Vue 基础代码功能，时 Vue 组件状态更加容易维护，为大型项目开发提供了强大的技术支持。

　　Vuex 下载安装

　　　　① 创建 vuex.js 文件

　　　　② 复制拷入 vuex.js 文件中  https://unpkg.com/vuex@3.6.2/dist/vuex.js

<body>
<div id="app">
    <p>{{ this.$store.state.name }}</p>
</div>
</body>

<script>
    // 创建实例对象 store
    var store = new Vuex.Store({
        state: {
            name: 'vuex.js 直接引用'
        }
    })
    
    var vm = new Vue({
        el: '#app',
        store
    })
</script>

　　　　store 中状态为响应式

<body>
<div id="app">
    <p>{{ this.$store.state.name }}</p>
</div>
</body>

<script>
    // 创建实例对象 store 其中的状态是响应式的 在组件中调用 store 中的状态使劲需要计算属性返回即可
    var store = new Vuex.Store({
        state: {
            name: 'vuex.js 直接引用'
        }
    })

    var mapState = Vuex.mapState
    
    var vm = new Vue({
        el: '#app',
        store,
        computed: {
            // 在组件中调用 store 中的状态使劲需要计算属性返回即可
            name () {
                return this.$store.state.name
            }
        }
    })
</script>

　　计算器案例

　　　　每一个  Vuex 应用的核心就是 store(仓库)，即响应式容器，它是用来定义应用中的数据以及数据处理工具。该表 store 的唯一途径就是显式的提交 mutation，方便耿总每一个状态的变化。

<body>
<div id="app">
    <button @click="increment">+</button>
    <p>{{ this.$store.state.count }}</p>
</div>
</body>

<script>
    const store = new Vuex.Store({
        state: {
            count: 0
        },

        // 修改 count 的值
        mutations: {
            increase(state) {
                state.count++
            }
        }
    })

    var vm = new Vue({
        el: '#app',
        store,
        methods: {
            increment() {
                this.$store.commit("increase")
            }
        }
    })
</script>

　　　　Vuex 状态管理模式

　　　　　　组件的状态变化是通过 Vue 单向数据流的设计理念实现的。

    new Vue({
        // State
        data() {
            return{ count: 0 }
        },
        // View
        template: '<div>{{ count }}</div>',
        // Actions
        methods: {
            increment() {
                this.count++
            }
        }
    })
　　　　　　　　State：驱动应用的数据源
　　　　　　　　View：已声明方式将 state 映射到视图
　　　　　　　　Action：响应在 View 上的用户输入导致的状态变化

　　　　　　但数据流的方向

　　　　View 的单向数据流增强了组件之间的独立性，但是存在多个组件共享状态的时候，单向数据流就会被破坏。为了数据维护更方便，需要将组建共享状态抽离出来，用全局单例模式来管理。该模式下，任何组件都能获取状态或者触发行为，这就是 Vuex 数据状态管理。Vuex 是专门为 Vue 设计的状态管理库，以利用 Vue 的细粒度数据响应机制来进行高效的状态更新。

　　　　　　Vuex 内部结构的工作流程关系图

　　Actions 中定义事件回调方法，通过 Dispatch 触发事件处理方法

　　　　例：store.dispatch('事件处理方法名称')，并且 Actions 是异步的。

　　Mutations 通过 Commit 提交

　　　　例：store.commit(‘事件处理方法名称’)，并且 Mutations 是异步的。

　　从指责上，Actions 负责业务代码，而 Matations 专注于修改 State。在提交 Mutations 时，devtools 调试工具完成 Mutations 状态变化的跟踪。

原文地址：https://www.cnblogs.com/yanjiuyanluo/p/14999343.html

随机文章
Javascript知识点必读
最近更新