Vuex 状态管理 02

转载

mob60475707d572 2021-07-12 11:55:00

Vuex 状态管理

Vuex 配置选项

　　actions

　　　　用来定义事件处理方法，用于处理 state 数据。actions 类似于 mutations，不同之处在于 actions 是异步执行的，事件处理函数可以接收 {commit} 对象，完成 mutation 提交，从而方便 devtools 调试工具跟踪状态的 state 变化。

　　　　使用时，需要在 store 仓库中注册 actions 选项，在里面事件处理方法。事件处理方法接受 context 作为第 1 个参数，payload 作为第二个参数（根据需要进行选择）。

<body>
<div id="app">
    // 按钮绑定单击事件
    <button @click="mut">查看 mutations 接收的参数</button>
    <button @click="act">查看 actions 接收的参数</button>
</div>
</body>

<script>
    var store = new Vuex.Store({
        state: {
            name: 'Tom',
            age: 38,
            gander: '男'
        },
        mutations: {
            test(state) {
                console.log(state)
            }
        },
        actions: {
            test(context, param) {
                console.log(param)
            }
        }
    })
    var vm = new Vue({
        el: '#app',
        store,
        // mut 事件处理方法完成 mutation 提交
        // act 事件处理方法完成 action 状态提交
        methods: {
            mut() {
                this.$store.commit('test')
            },
            act() {
                this.$store.dispatch({type: 'test', name: '我是传递的参数'})
            }
        }
    })
</script>

　　　　计算机案例，实现在 actions 中通过 context 提交到 mutations

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

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

        // 修改 count 的值
        mutations: {
            // mutations 中定义的 increment() 方法
            increment(state) {
                state.count++
            }
        },
        // actions: {
        //     add(context) {
        //         context.commit('increment')
        //     }
        // }
        actions: {
            // 使用 commit 推送一个名称为 incremenet 的 mutation
            add({commit}) {
                commit('increment')
            }
        }
    })

    var vm = new Vue({
        el: '#app',
        store,
        methods: {
            // 定义单击事件
            calc() {
                // 通过 dispatch 来推送一个名称为 add 的 action
                // add 方法接收参数为 context 对象
                this.$store.dispatch('add')
            }
        }
    })
</script>

　　　　mutations

　　　　　　该选项中处理方法接收 state 对象作为参数，即初始数据，使用时只需要在 state 实例配置对象中定义 state 即可。mutations 中的方法用来进行 state 数据造作，在组件中完成 mutations 提交就可以完成组件状态更新。

<body>
<div id="app">
    <!--    按钮绑定单击事件-->
    <button @click="param">传递参数</button>
    <p>{{ this.$store.state.param }}</p>
</div>
</body>

<script>
    var store = new Vuex.Store({
        state: {
            param: ''
        },
        mutations: {
            // 定义 mutations 的事件处理方法 receive，接收数据类型为 state、param
            receive(state, param) {
                // 将 param 的 name 的值 赋值给 state 的 param
                state.param = param.name
            }
        },
        actions: {
            param(context) {
                // 传入对象形式的参数
                context.commit({type: 'receive', name: '我是传递的参数'})
                //  通过 context 对象提交名为 receive 的 mutation，并将 ‘我是传递参数’ 作为参数传递
                // context.commit('receive', '我是传递的参数')
            }
        }
    })

    var vm = new Vue({
        el: '#app',
        store,
        methods: {
            // 注册事件处理方法 param ，并且通过单击事件绑定到页面中的 ”传递参数“ 按钮上，实现单击按钮，页面展示 param 的值
            param() {
                this.$store.dispatch('param')
            }
        }
    })
</script>

Vuex 状态管理 02_单击事件

　　　　　　mutations 是异步函数，组件状态发生变化时，触发 mutations 中的事件处理方法来更新页面状态的变化，这是一种同步。同步方法是同步执行的，主要可以记录当前状态的变化，同步到页面中。在 mutations 中如果有异步操作，devtools 很难追踪状态的改变。

<body>
<div id="app">
    <button @click="async">异步操作</button>
    <p>{{ this.$store.state.count }}</p>
</div>
</body>

<script>
    var store = new Vuex.Store({
        state: {
            count: 0
        },
        mutations: {
            receive(state) {
                setTimeout(function () {
                    state.count++
                }, 100)
                console.log(state.count)
            }
        }
    })

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

Vuex 状态管理 02_传递参数_02

　　　　getters

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

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

<script>
    const store = new Vuex.Store({
        state: {
            todos: [
                {id: 1, text: '完成', done: true},
                {id: 2, text: '未完成', done: false}
            ]
        },
        getters: {
            doneTodos: state => {
                return state.todos.filter(todo => todo.done)
            }
        }
    })
    var vm = new Vue({
        el: '#app',
        store
    })
</script>

　　　　　　getters 还可获取其定义方法中的数组、以及 length 值

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

<script>
    const store = new Vuex.Store({
        state: {
            todos: [
                {id: 1, text: '完成', done: true},
                {id: 2, text: '未完成', done: false}
            ]
        },
        getters: {
            doneTodos: state => {
                return state.todos.filter(todo => todo.done)
            },
            doneTodosCount: (state, getters) => {
                return getters.doneTodos.length
            }
        }
    })
    var vm = new Vue({
        el: '#app',
        store
    })
</script>

　　　　　　列表查询功能

<body>
<div id="app">
    <h2>列表查询</h2>
    <input type="text" v-model="id">
    <button @click="search">搜索</button>
    <p>搜索结果: {{ this.$store.getters.search }}</p>
    <ul>
        <li v-for="item in this.$store.state.todos"> {{ item }}</li>
    </ul>
</div>
</body>

<script>
    const store = new Vuex.Store({
        state: {
            todos: [
                {id: 1, text: 'list1'},
                {id: 2, text: 'list2'}
            ],
            id: 0
        },
        mutations: {
            search(state, id) {
                state.id = id
            }
        },
        getters: {
            search: state => {
                return state.todos.filter(todo => todo.id == state.id)
            }
        }
    })
    var vm = new Vue({
        el: '#app',
        store,
        methods: {
            search() {
                this.$store.commit('search', this.id)
            }
        }
    })
</script>