简易的vuex用法

简介: vuex是vue中用于管理全局状态的一个组件,用于不同组件之间的通信,下面将介绍它的简单用法 首先安装vue与vuex npm install vue npm install vuex --save 然后创建一个单独的文件store.

vuex是vue中用于管理全局状态的一个组件,用于不同组件之间的通信,下面将介绍它的简单用法

首先安装vue与vuex

npm install vue
npm install vuex --save

然后创建一个单独的文件store.vue用来对vuex的处理和使用

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

vuex有以下几种选项

  • state: Vuex store 实例的根 state 对象
  • mutations: 在 store 上注册 mutation,处理函数总是接受 state 作为第一个参数(如果定义在模块中,则为模块的局部状态),payload 作为第二个参数(可选)。
  • actions: 在 store 上注册 action。处理函数总是接受 context 作为第一个参数,payload 作为第二个参数(可选)。
  • getters: Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
  • modules: 包含了子模块的对象,会被合并到 store。
  • plugins: 一个数组,包含应用在 store 上的插件方法。
  • strict: 使 Vuex store 进入严格模式,在严格模式下,任何 mutation 处理函数以外修改 Vuex state 都会抛出错误。
 
我们今天只用到state,mutations,actions,getters
const state = {
    token: '' // 定义state的初始值,组建中我们可以用$store.state.token来调用
}
const mutations = {
  setToken (state, token) {
    state.token = token || ''
  }
}

我们可以用$store.commit('setToken', 'xxxxxx')来改变state中token的值

const actions = {
  setToken (context) {//这里的context和我们使用的$store拥有相同的对象和方法
    context.commit('setToken');
    //你还可以在这里触发其他的mutations方法
  },
}

可以使用 $store.dispatch('setToken') 来触发 action 中的 setToken方法。actions里面可以执行异步操作。

getters: {
    doneTodos: (state, getters) => {
      return state.todos.filter(todo => todo.done)
    }
  }

getters类似于vue的计算属性,它的作用是用来派生一些新的状态,比如我们要把state状态的数据进行一次映射后者筛选,并把这个状态返回给组件使用。

最后将生成的实例导进main.js

export default new Vuex.Store({
  state,
  mutations,
  actions,
getters })

main.js

import store from './store'
new Vue({
  el: '#app',
  store,
  components: { App },
  template: '<App/>'
})

这样vuex的功能已经可以用了,如果业务需要,可以慢慢将它们的选项都完善进去

每一次的记录,都是向前迈进的一步
目录
相关文章
|
12月前
|
编解码 人工智能 运维
南加大提出全新通用时间序列基础模型TimeDiT!基于扩散模型创新物理约束机制
 【10月更文挑战第10天】南加大提出TimeDiT模型,创新融合扩散模型与Transformer架构,针对真实世界时间序列数据的复杂性,如多分辨率、缺失值等问题,提供高效解决方案。该模型通过新颖的掩码机制和无微调编辑策略,实现多任务处理及物理知识集成,显著提升预测和异常检测的准确性和鲁棒性。
335 3
|
负载均衡 网络协议 Linux
在Linux中,常用WEB服务器负载架构有哪些?
在Linux中,常用WEB服务器负载架构有哪些?
|
9月前
|
人工智能 资源调度 数据可视化
StoryWeaver:故事可视化生成模型,快速生成故事绘本,支持处理单角色和多角色的故事可视化任务
StoryWeaver 是厦门大学与网易伏羲联合推出的 AI 模型,通过知识图谱和角色定制技术,实现高质量的故事可视化。
490 18
StoryWeaver:故事可视化生成模型,快速生成故事绘本,支持处理单角色和多角色的故事可视化任务
|
前端开发 网络协议
Netty实战巅峰:从零构建高性能IM即时通讯系统,解锁并发通信新境界
【8月更文挑战第3天】Netty是一款高性能、异步事件驱动的网络框架,适用于开发高并发网络应用,如即时通讯(IM)系统。本文将指导你利用Netty从零构建高性能IM程序,介绍Netty基础及服务器/客户端设计。服务器端使用`ServerBootstrap`启动,客户端通过`Bootstrap`连接服务器。示例展示了简单的服务器启动过程。通过深入学习,可进一步实现用户认证等功能,打造出更完善的IM系统。
412 1
|
10月前
|
人工智能 搜索推荐 决策智能
不靠更复杂的策略,仅凭和大模型训练对齐,零样本零经验单LLM调用,成为网络任务智能体新SOTA
近期研究通过调整网络智能体的观察和动作空间,使其与大型语言模型(LLM)的能力对齐,显著提升了基于LLM的网络智能体性能。AgentOccam智能体在WebArena基准上超越了先前方法,成功率提升26.6个点(+161%)。该研究强调了与LLM训练目标一致的重要性,为网络任务自动化提供了新思路,但也指出其性能受限于LLM能力及任务复杂度。论文链接:https://arxiv.org/abs/2410.13825。
181 12
|
计算机视觉 Python
Hough变换原理-直线检测
Hough变换原理-直线检测
379 2
|
芯片
深入理解AMBA总线(一)APB总线入门(上)
深入理解AMBA总线(一)APB总线入门
1473 0
|
存储 JSON 数据库
从 MQTT、InfluxDB 将数据无缝接入 TDengine,接入功能与 Logstash 类似
利用 TDengine Enterprise 和 TDengine Cloud 的数据接入功能,我们现在能够将 MQTT、InfluxDB 中的数据通过规则无缝转换至 TDengine 中,由于该功能在实现及使用上与 Logstash 类似,本文将结合 Logstash 为大家进行解读。
420 1
|
供应链 算法 搜索推荐
先锋人物 | 阿里巴巴集团副总裁肖利华:拥抱数字经济,占据下一个十年的竞争发展制高点
先锋人物 | 阿里巴巴集团副总裁肖利华:拥抱数字经济,占据下一个十年的竞争发展制高点
859 0
|
数据可视化 关系型数据库 MySQL
课时1:Github实时数据分析与可视化
课时1:Github实时数据分析与可视化