AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Vue学习笔记(十一) Vuex

2023-04-24 94
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Vue学习笔记(十一) Vuex


1、介绍


Vuex 是一个为 Vue 应用程序开发的状态管理模式，它用集中式存储来管理应用所有组件的状态

简单来说，它的作用就是把所有组件的共享状态抽取出来，以一个全局单例的模式进行管理

我们可以把 Vuex 理解成一个 store，里面存储着所有组件共享的 state（数据）和 mutations（操作）

这里还是先附上官方文档的链接：https://vuex.vuejs.org/zh/，有兴趣的朋友可以去看看


2、安装


（1）通过 CDN 引用

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>


（2）通过 NPM 安装与使用

  • 安装
> npm install vuex


  • 使用

在项目中需要通过 Vue.use() 明确安装 Vuex

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)


3、State


Vuex 中的 state 用于集中存储数据，当我们需要访问 state 时，可以先将其映射为计算属性

由于 state 是响应式的，所以当 state 发生变化时，它会重新求取计算属性，并自动更新相应的 DOM

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/vuex"></script>
</head>
<body>
    <div id="app">
        <my-counter></my-counter>
    </div>
    <script>
        // 1、定义 store
        const store = new Vuex.Store({
            state: { // 定义 state
                count: 0
            }
        })
        // 2、定义组件
        const Counter = {
            template: `
                <div>
                    <p>{{ count }}</p>
                </div>
            `,
            // 如果需要访问 state，可以在计算属性中通过 this.$store.state 返回数据
            computed: {
                count() {
                    return this.$store.state.count
                }
            }
        }
        // 3、创建并挂载根实例
        const app = new Vue({
            store, // 注入 store
            components: {
               'my-counter': Counter 
            }
        }).$mount('#app')
    </script>
</body>
</html>


假设我们要在一个组件中使用多个 state，如果为每个状态都写一条语句将其映射为计算属性未免太过繁琐

所以 Vuex 提供 mapState() 辅助函数能够帮助我们完成这些工作

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/vuex"></script>
</head>
<body>
    <div id="app">
        <my-counter></my-counter>
    </div>
    <script>
        const store = new Vuex.Store({
            state: {
                counter1: 0,
                counter2: 10,
                counter3: 100
            }
        })
        const Counter = {
            template: `
                <div>
                    <p>couter1: {{ counter1 }}</p>
                    <p>couter2: {{ counter2 }}</p>
                    <p>couter3: {{ counter3 }}</p>
                </div>
            `,
            data: function () {
                return {
                    localCounter: 1
                }
            },
            computed: {
                // mapState() 返回一个对象，使用对象展开运算符将其混入 computed 对象
                ...Vuex.mapState({
                    // 使用箭头函数，可以简化代码
                    counter1: state => state.counter1,
                    // 使用字符串 'counter2'，等价于 `state => state.counter2`
                    counter2: 'counter2',
                    // 使用常规函数，可使用 `this` 以获取局部状态
                    counter3 (state) {
                        return state.counter3 + this.localCounter
                    }
                })
            }
        }
        const app = new Vue({
            store,
            components: {
                'my-counter': Counter
            }
        }).$mount('#app')
    </script>
</body>
</html>


4、Getter


Vuex 中的 getter 用于管理派生出来的状态

它就相当于计算属性一样，会被缓存起来，当依赖发生改变时才会重新计算

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/vuex"></script>
</head>
<body>
    <div id="app">
        <my-todo></my-todo>
    </div>
    <script>
        const store = new Vuex.Store({
            state: {
                todos: [
                    { id: 1, text: 'Say Hello', done: true},
                    { id: 2, text: 'Say Goodbye', done: false}
                ]
            },
            getters: { // 定义 getters
                // 其接受 state 作为第一个参数
                doneTodos: state => {
                    return state.todos.filter(todo => todo.done)
                },
                // 其接受 getters 作为第二个参数
                doneTodosCount: (state, getters) => {
                    return getters.doneTodos.length
                }
            }
        })
        const Todo = {
            template: `
                <div>
                    <p>{{ doneTodosCount }} task(s) done</p>
                    <ul><li v-for="item in doneTodos">{{ item.text }}</li></ul>
                </div>
            `,
            computed: {
        doneTodos () {
                    return this.$store.getters.doneTodos
                },
                doneTodosCount () {
                    return this.$store.getters.doneTodosCount
                }
            }
        }
        const app = new Vue({
            store,
            components: {
               'my-todo': Todo
            }
        }).$mount('#app')
    </script>
</body>
</html>


和 state 一样，getters 也有一个名为 mapGetters() 的辅助函数将其映射为计算属性

computed: {
    ...mapGetters([
      'doneTodos',
      'doneTodosCount'
    ])
}


如果要给 getter 重命名，可以用对象形式

computed: {
    ...mapGetters({
      doneTodosAlias: 'doneTodos',
      doneTodosCountAlias: 'doneTodosCount'
    })
}


5、Mutation

上面我们讲了怎么访问 state，下面我们来看看怎么修改 state，改变状态的唯一方法是提交 mutation

这里，请记住一条重要的规则：mutation 必须是同步函数

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/vuex"></script>
</head>
<body>
    <div id="app">
        <my-counter></my-counter>
    </div>
    <script>
        const store = new Vuex.Store({
            state: {
                count: 0
            },
            mutations: { // 定义 mutations
                // 传入的第一个参数是 state
                increment(state) {
                    state.count += 1
                },
                // 传入的第二个参数是 payload，可以提供额外的信息
                incrementN(state, payload) {
                    state.count += payload.amount
                }
            }
        })
        const Counter = {
            template: `
                <div>
                    <p>{{ count }}</p>
                    <button @click="increment"> 加 1 </button>
                    <button @click="incrementN"> 加 10 </button>
                </div>
            `,
            // 如果需要访问 state，可以在计算属性中通过 store.state 返回数据
            computed: {
                count() {
                    return store.state.count
                }
            },
            // 如果需要修改 state，可以通过 store.commit() 提交 mutation
            methods: {
                increment() {
                    store.commit('increment')
                },
                incrementN() { // 以对象的形式给 commit() 传入 payload
                    store.commit('incrementN', {
                        amount: 10
                    })
                }
            }
        }
        const app = new Vue({
            store,
            components: {
                'my-counter': Counter
            }
        }).$mount('#app')
    </script>
</body>
</html>


当然，我们也可以使用 mapMutations() 辅助函数将 mutation 映射为 methods

methods: {
    ...mapMutations([
        'increment',
        'incrementN'
    ])
}


也同样可以使用对象形式支持重命名

methods: {
    ...mapMutations({
        add: 'increment',
        addN: 'incrementN'
    })
}


6、Action

还记得上面我们说过 mutation 只能是同步函数，若需要使用异步操作，则可以通过分发 action

action 内部可以包含异步逻辑，它做的工作是提交 mutation，而不是直接改变状态

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/vuex"></script>
</head>
<body>
    <div id="app">
        <my-counter></my-counter>
    </div>
    <script>
        const store = new Vuex.Store({
            state: {
                count: 0
            },
            mutations: {
                increment(state) {
                    state.count += 1
                },
                incrementN(state, payload) {
                    state.count += payload.amount
                }
            },
            actions: { //定义 actions
                // 该方法接受一个与 store 实例具有相同属性和方法的对象作为参数
                // 我们可以调用 context.commit() 提交 mutation
                // 也可以通过 context.state 和 context.getters 访问 state 和 getters
                incrementAsync(context) {
                    setTimeout(() => {
                        context.commit('increment')
                    }, 1000)
                },
                // 和 mutations 一样，也可以传入第二个参数 payload
                incrementNAsync(context, payload) {
                    setTimeout(() => {
                        context.commit('incrementN', payload)
                    }, 1000)
                }
            }
        })
        const Counter = {
            template: `
                <div>
                    <p>{{ count }}</p>
                    <button @click="increment"> 同步加 1 </button>
                    <button @click="incrementN"> 同步加 10 </button>
                    <button @click="incrementAsync"> 异步加 1 </button>
                    <button @click="incrementNAsync"> 异步加 10 </button>
                </div>
            `,
            computed: {
                count() {
                    return store.state.count
                }
            },
            methods: {
                // 通过 store.commit() 提交 mutation
                increment() {
                    store.commit('increment')
                },
                incrementN() { // 以对象的形式给 commit() 传入 payload
                    store.commit('incrementN', {
                        amount: 10
                    })
                },
                // 通过 store.dispatch() 分发 action
                incrementAsync() {
                    store.dispatch('incrementAsync')
                },
                incrementNAsync() { // 以对象的形式给 dispatch() 传入 payload
                    store.dispatch('incrementNAsync', {
                        amount: 10
                    })
                }
            }
        }
        const app = new Vue({
            store,
            components: {
                'my-counter': Counter
            }
        }).$mount('#app')
    </script>
</body>
</html>


如果需要处理更复杂的异步逻辑，我们也可以使用 Promise 和async/await

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/vuex"></script>
</head>
<body>
    <div id="app">
        <my-counter></my-counter>
    </div>
    <script>
        const store = new Vuex.Store({
            state: {
                count: 0
            },
            mutations: {
                add(state) {
                    state.count += 10
                },
                multiply(state) {
                    state.count *= 10
                }
            },
            actions: {
                addAsync(context) {
                    setTimeout(() => {
                        context.commit('add')
                    }, 1000)
                },
                multiplyAsync(context) {
                    setTimeout(() => {
                        context.commit('multiply')
                    }, 1000)
                },
                // 只允许使用异步函数 addAsync 和 multiplyAsync，实现先乘后加
                // 使用 async/await
                async multiplyBeforeAdd(context) {
                    await context.dispatch('multiplyAsync')
                    context.dispatch('addAsync')
                },
                // 只允许使用异步函数 addAsync 和 multiplyAsync，实现先加后乘
                // 使用 async/await
                async addBeforeMultiply(context) {
                    await context.dispatch('addAsync')
                    context.dispatch('multiplyAsync')
                }
            }
        })
        const Counter = {
            template: `
                <div>
                    <p>{{ count }}</p>
                    <button @click="done"> 乘10，加10，加10，乘10 </button>
                </div>
            `,
            computed: {
                count() {
                    return store.state.count
                }
            },
            methods: {
                // 先完成先乘后加，再完成先加后乘
                done() {
                    store.dispatch('multiplyBeforeAdd').then(() => {
                        store.dispatch('addBeforeMultiply')
                    })
                }
            }
        }
        const app = new Vue({
            store,
            components: {
                'my-counter': Counter
            }
        }).$mount('#app')
    </script>
</body>
</html>


文章知识点与官方知识档案匹配，可进一步学习相关知识

文章标签：
JavaScript
前端开发
CDN
缓存
存储
关键词：
vue vuex VUE.js
vuex VUE.js
VUE.js VUEX
vue学习笔记VUE.js
学习笔记VUE.js
半虹
目录
相关文章
小宋1021
|
12天前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
小宋1021
78 1
阿里巴巴叫我来巡山
|
22天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统，提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性，实现用户友好的界面，方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构，确保稳定性和多功能模块设计，涵盖管理员和用户功能模块，促进物品循环使用，降低开销，提升环保意识，助力绿色校园文化建设。
阿里巴巴叫我来巡山
146 17
程序员彭于晏
|
2月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
程序员彭于晏
42 1
九月天空
|
2月前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
九月天空
40 1
G0518
|
2月前
|
JavaScript 前端开发 API
介绍一下Vue中的响应式原理
介绍一下Vue中的响应式原理
G0518
38 1
程序员彭于晏
|
2月前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
程序员彭于晏
51 0
程序员彭于晏
|
2月前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
程序员彭于晏
59 0
马家堡梅西
|
存储 JavaScript
在 Vue 组件中获得 Vuex 状态
马家堡梅西
1284 0
雨溪-yuxi
|
2月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客！我是瑞雨溪，一名热爱前端的大一学生，专注于JavaScript与Vue，正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我，持续更新中！🎉🎉🎉
雨溪-yuxi
52 1
vue学习第一章
雨溪-yuxi
|
2月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客，一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令，包括基本使用、动态绑定class及style等，希望能为你的前端学习之路提供帮助。持续关注，更多精彩内容即将呈现！🎉🎉🎉
雨溪-yuxi
49 1

热门文章

最新文章

  • 1
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 2
    vue使用富文本编辑器wangEditor，且增加附件功能 | 项目复盘
  • 3
    Vue 2 vs Vue 3: 深入浅出的优势剖析
  • 4
    vue3前端项目一步一步自动化部署到linux的nginx服务上
  • 5
    vue+elementui中，el-select多选下拉列表中，如何同时获取:value和:label的值？
  • 6
    uniapp使用Vue3挂载函数到全局
  • 7
    vue3.0 router路由跳转传参（router.push）
  • 8
    Vue中 引入外部字体并使用
  • 9
    「后端小伙伴来学前端了」Vue集成 Element-tiptap 富文本编辑器
  • 10
    Vue之处理边界情况
  • 1
    使用Vue.js构建交互式前端的技术探索
    98
  • 2
    ruoyi-nbcio-plus基于vue3的flowable为了适配文件上传改造VForm3的代码记录
    182
  • 3
    vue2升级到vue3的一些使用注意事项记录(四）
    151
  • 4
    ruoyi-nbcio-plus基于vue3的flowable收回任务后重新进行提交表单的处理
    164
  • 5
    ruoyi-nbcio-plus基于vue3的flowable多租户机制
    226
  • 6
    ruoyi-nbcio-plus基于vue3的flowable的消息中心我的消息的升级修改
    123
  • 7
    vue3中使用动态组件
    120
  • 8
    Vue 3 中 ＜transition-group＞ 组件报错的非 props 属性传递问题
    151
  • 9
    ruoyi-nbcio-plus基于vue3的flowable的自定义业务显示历史信息组件的升级修改
    81
  • 10
    ruoyi-nbcio-plus基于vue3的flowable的支持自定义业务流程处理页面detail.vue的升级修改
    131

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门与实战
  • React 入门教程开发文档
  • jQuery开发教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索

    • 相关实验场景

    更多
  • 搭建Node.js编程环境
    • 下一篇
    DataWorks智能交互式数据开发与分析之旅