初识 Vuex

Vuex 概述

Vuex 是 Vue 官方提供的一套组件状态（即数据）管理和维护的解决方案。

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

Vuex 初体验

Vuex 3.x 文档：https://vuex.vuejs.org/zh/

Vuex 的使用：

• 新建 HTML 文件，并使用 script 标签引入 vue.js、vuex.js。
• 创建 Vuex 的“数据仓库” Store 对象，并初始化数据。
• 实例化 Vue 实例，并将 Store 对象传递给 Vue 实例。
• 在 app 盒子中，通过 this.$store.state 获取数据。

示例：Vuex 初体验

入口页面（index.html）：

<div id="app">
    <!--
        通过 this.$store.state.参数名 取值
    -->
    <p>{{this.$store.state.name}}</p>
</div>

<script>
    // 创建Vuex数据仓库对象
    let store = new Vuex.Store({
        // state：状态即数据
        state: {
            name: 'hello，Vuex'
        }
    })

    let vm = new Vue({
        el: '#app',
        // 挂载Vuex实例，等同于store: store
        store,
    })
</script>

示例效果：

Vuex Store 中的数据是响应式的，在组件中调用 Store 中的数据，除了可以使用 this.$store.state 外，还可以使用计算属性的方式获取数据。

示例：通过计算属性获取数据

入口页面（index.html）：

<div id="app">
    <!--
        通过计算属性生成参数
    -->
    <p>{{name}}</p>
</div>

<script>
    let store = new Vuex.Store({
        state: {
            name: 'hello，Vuex'
        }
    })

    let vm = new Vue({
        el: '#app',
        store,
        computed: {
             name() {
                 // 在计算属性中返回store中的数据
                 return this.$store.state.name
             }
        }
    })
</script>

当一个组件需要获取多个数据时，将 store 中的数据都声明为计算属性有些麻烦，Vuex 提供了 mapState 辅助函数来生成计算属性。

示例：通过 mapState 生成计算属性

入口页面（index.html）：

<div id="app">
    <!--
        通过Vuex.mapState批量生成计算属性
    -->
    <p>{{name}}</p>
</div>

<script>
    let store = new Vuex.Store({
        state: {
            name: 'hello，Vuex'
        }
    })

    let vm = new Vue({
        el: '#app',
        store,
        computed: {
            // ...：展开运算符，将mapState的结果放到计算属性中
            //
            ...Vuex.mapState(['name'])
        }
    })
</script>

Vuex 状态管理模式

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

在组件系统中，单向数据流是指父组件通过属性 props 传递数据到子组件，子组件不能直接修改从父组件接收的 props，而是应该通过自定义事件来通知父组件进行数据更新。

Vue 的单向数据流增强了组件之间的独立性，但是存在多个组件共享数据的时候，单向数据流就难以对数据进行维护。

Vuex 就是专门为 Vue 设计的状态（数据）管理库，利用 Vue 的细粒度数据响应机制来进行高效的状态更新。

Vuex 配置选项

mutations

在 Vuex 中，不能直接修改 store 中的数据，必须调用相应的事件处理方法处理 state 数据。

如果直接修改 store 中的数据，视图页面会发生变化，但 store 中的数据实际上并没有发生变化。

示例：直接修改 store 中的数据

入口页面（index.html）：

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

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

    let vm = new Vue({
        el: '#app',
        store,
        methods: {
            click1() {
                this.$store.state.count++
            }
        }
    })
</script>

示例效果：

mutations 选项用来定义事件处理方法，用于处理 state 数据，调用 mutations 中的方法，就可以完成数据更新。

示例：使用 mutations 提交数据更新

入口页面（index.html）：

<div id="app">
    <button @click="click1">直接 count++</button>
    <button @click="click2">使用mutations修改count</button>
    <p>{{this.$store.state.count}}</p>
</div>

<script>
    let store = new Vuex.Store({
        state: {
            count: 0
        },
        // mutations：定义数据处理方法
        mutations: {
            // state：Vuex.Store.state对象
            // param：要修改的新数据
            updateCount(state, param) {
                // 让Store中的数据等于新的数据
                state.count = param
            }
        }
    })

    let vm = new Vue({
        el: '#app',
        store,
        methods: {
            // ...
            click2() {
                // 通过this.$store.commit()调用mutations中的更新数据的方法
                // 参数1：调用的方法名
                // 参数2：新的参数的值，可以不传
                this.$store.commit('updateCount', 100)
            }
        }
    })
</script>

示例效果：

mutations 中定义的方法是同步函数，组件数据发生变化时，触发 mutations 中的事件处理方法来更新数据，这是一种同步更新，在 mutations 中，不能有异步操作。

示例：使用 mutations 异步更新数据

入口页面（index.html）：

<div id="app">
    <button @click="click1">直接 count++</button>
    <button @click="click2">使用mutations修改count</button>
    <button @click="click3">3秒钟后修改count</button>
    <p>{{this.$store.state.count}}</p>
</div>

<script>
    let store = new Vuex.Store({
        state: {
            count: 0
        },
        mutations: {
            updateCount(state, param) {
                // 定时器：三秒后修改数据（异步操作）
                setTimeout(function () {
                    state.count = param
                }, 3000)
            }
        }
    })

    let vm = new Vue({
        el: '#app',
        store,
        methods: {
            // ...
            click3() {
                this.$store.commit('updateCount', 100)
            }
        }
    })
</script>

示例效果：

actions

actions 和 mutations 类似，都是用于定义事件处理方法的。

actions 定义的方法，可以执行异步操作，actions 的本质还是调用 mutations。

示例：使用 actions 异步更新数据

入口页面（index.html）：

<div id="app">
    <button @click="click1">直接 count++</button>
    <button @click="click2">使用mutations修改count</button>
    <button @click="click3">3秒钟后修改count</button>
    <button @click="click4">3秒钟后修改count（actions）</button>
    <p>{{this.$store.state.count}}</p>
</div>

<script>
    let store = new Vuex.Store({
        state: {
            count: 0
        },
        // 同步方法
        mutations: {
            updateCount(state, param) {
                state.count = param
            }
        },
        // 异步方法
        actions: {
            // context：即$store对象
            // param：要修改的新数据
            updateCount(context, param) {
                // 定时器：三秒后修改数据（异步操作）
                setTimeout(function () {
                    // 调用$store.commit执行同步更新
                    // actions的本质还是mutations
                    context.commit('updateCount', param)
                }, 3000)
            }
        }
    })

    let vm = new Vue({
        el: '#app',
        store,
        methods: {
            // ...
            click4() {
                // 通过this.$store.dispatch()调用actions中的更新数据的方法
                this.$store.dispatch('updateCount', 100)
            }
        }
    })
</script>

示例效果：

getters

Vuex 允许在 store 中定义 getters 计算属性，类似于 Vue 实例的 computed，getters 返回值会根据它的依赖进行处理然后缓存起来，且只有当它的依赖值发生变化时才会重新计算。

示例：getters

入口页面（index.html）：

<div id="app">
    <p>单价：{{this.$store.state.price}}</p>
    <p>数量：{{this.$store.state.count}}</p>
    <p>总价：{{this.$store.getters.totalPrice}}</p>
    <p>
        <button @click="plus">+1</button>
        <button @click="minus">-1</button>
    </p>
</div>

<script>
    let store = new Vuex.Store({
        state: {
            price: 10,
            count: 0
        },
        mutations: {
            plus(state) {
                state.count++
            },
            minus(state) {
                state.count--
            }
        },
        // 定义Vuex的计算属性
        getters: {
            totalPrice(state) {
                return state.price * state.count
            }
        }
    })

    let vm = new Vue({
        el: '#app',
        store,
        methods: {
            plus() {
                this.$store.commit('plus')
            },
            minus() {
                this.$store.commit('minus')
            }
        }
    })
</script>

示例效果：

modules

Vuex 提出了类似于模块化开发的方式对 store 进行管理。

modules 用于在 store 中定义模块对象。

示例：modules

入口页面（index.html）：

<div id="app">
    <!--
        通过 this.$store.state.模块名.xxx 调用
    -->
    <p>{{this.$store.state.a.count}}</p>
    <p>{{this.$store.state.b.count}}</p>
</div>

<script>
    // 定义模块A对象
    let moduleA = {
        state: {
            count: 1
        }
    }
    // 定义模块B对象
    let moduleB = {
        state: {
            count: 2
        }
    }

    let store = new Vuex.Store({
        // 定义模块
        modules: {
            // 模块名称: 模块对象
            a: moduleA,
            b: moduleB
        }
    })

    let vm = new Vue({
        el: '#app',
        store
    })
</script>

示例效果：

plugins

plugins 是 Vuex 中的插件配置选项，用于为 Vuex 添加插件。

示例：plugins

入口页面（index.html）：

<div id="app">

</div>

<script>
    // 自定义一个插件
    // 插件本身是一个方法
    // store：Vuex.Store对象
    let myPlugin = function(store) {
        // subscribe方法：处理mutations
        // 每次mutations提交后都会执行这个方法
        // mutation：调用的同步方法的信息
        store.subscribe((mutation, state) => {
            // mutation.type：调用了什么方法
            // mutation.payload：传进来什么参数
            console.log("调用mutation方法：" + mutation.type + "，参数为：" + mutation.payload)
        })
    }

    let store = new Vuex.Store({
        // 指定插件列表
        plugins: [myPlugin],
        mutations: {
            do(state) {
                console.log('do被执行了')
            }
        }
    });

    store.commit('do', 'hello')

    let vm = new Vue({
        el: '#app',
        store
    })
</script>

示例效果：

devtools

devtools 用于设置是否在 vue-devtools 中启用 Vuex 跟踪调试。

示例：devtools

入口页面（index.html）：

let store = new Vuex.Store({
    devtools: false,
    // ...
})

Vuex API

模块注册

Vuex store 提供了动态创建模块的方法 store.registerModule。

示例：store.registerModule

入口页面（index.html）：

let store = new Vuex.Store({})

// 参数1：模块名称
// 参数2：模块对象
store.registerModule('myModule', {
    state: {}
})

状态替换

Vuex 提供了状态替换的方法 store.replaceState。

应尽量避免使用这个方法，在错误的位置使用这个方法会造成数据被错误覆盖。

示例：store.replaceState

入口页面（index.html）：

let store = new Vuex.Store({
    state: {
    count: 0
    }
})

// 参数1：要替换的新的state对象
store.replaceState({
    count: 1
})