面试官:请你说一说vuex的五个属性,分别是什么,区别和用途说一下(三)

简介: 面试官:请你说一说vuex的五个属性,分别是什么,区别和用途说一下

面试官:请你说一说vuex的五个属性,分别是什么,区别和用途说一下(二)https://developer.aliyun.com/article/1429054


07 项目结构

对于大型应用,我们会希望把 Vuex 相关代码分割到模块中。下面是项目结构示例:

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API请求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块

08 vuex简单应用实例

创建一个用来共享的存储,在这个例子中它将通过 vue/vuex 注入到组件当中。

定义组件可以调用的 actions,它们仍然是集中定义的。

定义实际接触存储状态的 mutations。我们这么做,actions 就可以形成不止一个 mutation,或者执行逻辑去决定调用哪一个 mutation。这意味着你再也不用担心组件当中的业务逻辑了,成功!

当状态更新时,任何拥有 getter,动态属性和映射到 store 的组件都会被立即更新。

main.js

用 Vuex 创建了一个存储并将其直接传入应用程序当中

import Vue from 'vue'
import App from './App.vue'
import store from './vuex/store'
new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

store.js

export default new Vuex.Store({
  state: {
    messages: []
  },
  actions: {
    newMessage ({commit}, msg) {
      commit('NEW_MESSAGE', msg)
    }
  },
  mutations: {
    NEW_MESSAGE (state, msg) {
      state.messages.push(msg)
    }
  }
})

Client.vue

<template>
    <div>
        <h1>{{ clientid }}</h1>
        <div>
            <ul>
                <li v-for="message in messages">
                    <label>{{ message.sender }}:</label> {{ message.text }}
                </li>
            </ul>
            <div>
                <input v-model="msg" placeholder="Enter a message, then hit [enter]" @keyup.enter="trySendMessage">
            </div>
        </div>
    </div>
</template>
<script>
    import { mapState, mapActions } from 'vuex'
    export default {
        data() {
            return {
                msg: ''
            }
        },
        props: ['clientid'],
        computed:{
                ...mapState({
                  messages: state => state.messages
            })
    },
 methods: {
        trySendMessage() {
            this.newMessage({
                text: this.msg,
                sender: this.clientid
            })
            this.resetMessage()
        },
        resetMessage() {
            this.msg = ''
        },
       ...mapActions(['newMessage'])
    }
    }
</script>
<style>
</style>

App.vue

<div>
        <client clientid="Client A"></client>
</div>
<div>
        <client clientid="Client B"></client>
</div>
<script>
  import client from './components/Client.vue'
  import store from './vuex/store'
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  components:{client}
}
</script>

参考链接:

https://www.cnblogs.com/y896926473/articles/6709733.html

相关文章
|
28天前
|
消息中间件 负载均衡 Kafka
【Kafka面试演练】那Kafka消费者手动提交、自动提交有什么区别?
嗯嗯Ok。分区的作用主要就是为了提高Kafka处理消息吞吐量。每一个topic会被分为多个分区。假如同一个topic下有n个分区、n个消费者,这样的话每个分区就会发送消息给对应的一个消费者,这样n个消费者负载均衡地处理消息。同时生产者会发送消息给不同分区,每个分区分给不同的brocker处理,让集群平坦压力,这样大大提高了Kafka的吞吐量。面试官思考中…
48 4
|
2月前
|
存储 安全 关系型数据库
|
22天前
|
编译器 C++ Python
【C/C++ 泡沫精选面试题02】深拷贝和浅拷贝之间的区别?
【C/C++ 泡沫精选面试题02】深拷贝和浅拷贝之间的区别?
30 1
|
2月前
|
存储 SQL 数据库
面试题20: 存储过程和函数的区别
面试题20: 存储过程和函数的区别
|
4天前
|
Java 关系型数据库 MySQL
大厂面试题详解:Java抽象类与接口的概念及区别
字节跳动大厂面试题详解:Java抽象类与接口的概念及区别
27 0
|
9天前
|
存储 JSON Java
面试官:Session和JWT有什么区别?
JSON Web Token (JWT) 是一种开放标准,用于安全地在网络上传输信息。JWT 包含头部、载荷和签名三部分,常用于身份验证和授权。与Session相比,JWT有以下优势:无服务器存储状态,支持跨域,适应微服务架构,自包含且可扩展。在Java开发中,可以使用HuTool框架操作JWT,包括生成、验证和解析Token。JWT通过在客户端存储令牌实现无状态认证,与Session的主要区别在于工作原理、存储方式和有效期管理。
24 6
|
24天前
|
消息中间件 算法 Java
面试官:Kafka和ES选主有什么区别?
Kafka 和 ES,作为大数据处理的中间件,分别用于流处理和全文检索。它们的选主(Kafka 的 Controller 和 ES 的 Master)都基于 Raft 算法实现一致性。Raft 算法通过选举确保分布式系统数据一致性,涉及领导者、追随者和候选人间的身份转换。当超过一半的节点投票给同一候选节点时,该节点成为新领导者。Kafka 和 ES 在此基础上可能有各自优化调整。更多关于 Raft 算法的详细流程和选举规则见原文。
38 2
|
24天前
|
网络协议 网络性能优化
网络面试题:TCP和UDP的区别
网络面试题:TCP和UDP的区别
20 0
|
1月前
|
运维 负载均衡 NoSQL
【大厂面试官】知道Redis集群和Redis主从有什么区别吗
集群节点之间的故障检测和Redis主从中的哨兵检测很类似,都是通过PING消息来检测的。。。面试官抓抓脑袋,继续看你的简历…得想想考点你不懂的😰。
57 1
|
1月前
|
存储 C语言
c语言中strlen与sizeof的区别(指针面试题详解帮你深度区分!)
c语言中strlen与sizeof的区别(指针面试题详解帮你深度区分!)