首页 > 其他分享 >xstate在vue中像vuex/pinia那样管理数据

xstate在vue中像vuex/pinia那样管理数据

时间:2023-05-14 12:23:55浏览次数:42  
标签:count vue const pinia 中像 state context useToggleMachine

//store.js
import { assign, createMachine, interpret } from 'xstate'
import { useActor } from '@xstate/vue'
const counterMachine = createMachine({
  id: 'counter',
  context: {
    count: 0,
  },
  initial: 'idle',
  states: {
    idle: {
      on: {
        INCREMENT: {
          actions: assign({
            count: (context: { count: number }) => context.count + 1,
          }),
        },
        DECREMENT: {
          actions: assign({
            count: (context: { count: number }) => context.count - 1,
          }),
        },
      },
    },
  },
})

const service = interpret(counterMachine).start()

export const useToggleMachine = () => {
  return useActor(service)
}

const service = interpret(counterMachine).start()

export const useToggleMachine = () => {
       return useActor(service)
}

//A.vue
<template>
   <div>
      {{ state.context.count }}
      <button @click="send('INCREMENT')">+++</button> 
//当a页面点击这两个按钮时state.context.count就进行了更新,b页面也就可以看到最新的state.context.count
      <button @click="send('DECREMENT')">----</button>
    </div>
</template>

<script>
import { useToggleMachine } from '@/store/count'

const { state, send } = useToggleMachine()
console.log(state.value.context)
</script>



//B.vue
<template>
  <div>
         {{ state.context.count }}
  </div>
</template>

<script>
    import { useToggleMachine } from '@/store/count'
    const { state, send } = useToggleMachine()
</script>

 

标签:count,vue,const,pinia,中像,state,context,useToggleMachine
From: https://www.cnblogs.com/imzjk/p/17399031.html

相关文章

  • 结合vue2+highchartsjs技术,实现信号分析中的频谱瀑布图、星座图、眼图和声音波形图
    先看效果:总的来说,web端比传统桌面端资源更多一些,是未来学习的趋势。相关的资料在网上都能找到,这里就不提供源码了。......
  • vue核心
    VUE简介vue--一套用于构建用户界面的渐进式JavaScript框架vue特点采用组件化模式--提高代码复用率--让代码更好维护声明式编程--让编码人员无需直接操作DOM--提高开发效率vue安装vue2网址--https://v2.cn.vuejs.org/v2/guide/installation.html下载开发版本安装之后-......
  • java基于springboot基于vue的地方美食分享网站、美食管理系统,附源码+数据库+lw文档+PP
    1、项目介绍java基于springboot基于vue的地方美食分享网站、美食管理系统。(a)管理员;管理员使用本系统涉到的功能主要有:首页,个人中心,用户管理,外国美食管理,中式美食管理,热门菜品管理,论坛管理,我的收藏管理,留言板管理等功能。(b)用户;用户使用本系统涉到的功能主要有:首页,外国美食,......
  • RuoYi-Vue下载与运行
    一、源码下载若依官网:RuoYi若依官方网站鼠标放到"源码地址"上,点击"RuoYi-Vue前端分离版"。跳转至Gitee页面,点击"克隆/下载",复制HTTPS链接即可。源码地址为:https://gitee.com/y_project/RuoYi-Vue.git打开IDEA,选择"GetfromVCS"。将源码地址粘贴到URL输入框中,并选择本......
  • 论坛登录与注册vue代码
    <template><div><Dialog:show="dialogConfig.show":title="dialogConfig.title":buttons="dialogConfig.buttons"width="400px":showCancel="false"@cl......
  • vue2中数组和对象更改后视图不刷新解决办法
    vue2中,改变集合或数据某值时有时候并不会自动更新到视图上去,解决办法  1、官方推荐例如:projectList数组,show值点击一次改变一次方向<tdv-on:click="alertSub(index)"><ahref="javascript:;">{{item.}}</a></td>alertSub(index){this.projectLi......
  • 单文件报表:vue + element + echarts + axios
    最近做个专项,需要做结果展示,又不想再搭建个复杂工程,今天尝试了单文件的vue,基本做出来了。效果图参考文档1.自己写的v-charts文档:https://www.cnblogs.com/dannyyao/p/10728210.html2.vue官方文档:https://cn.vuejs.org/guide/essentials/reactivity-fundamentals.html#declari......
  • 理解vue2.x版本中productionTip=false设置无效的原因
    首先,我们看到vue官网中关于productionTip的API使用:但是,我在本地中使用却无效,代码如下:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname=&q......
  • pinia数据持久化
    方式一使用vueuse提供的hook函数useSessionStorage和useLocalStorage,可以实现对某个变量的持久话安装vueuse库npmi@vueuse/core在stoer中使用import{useLocalStorage}from'@vueuse/core'exportconstuseUserStore=defineStore('userStore',{state:()=>......
  • 解决vue.js出现Vue.js not detected错误
    VUEvue-devtools安装成功,但是图标为灰色,且控制台无vue选项的解决办法今天在学习VUE的过程中,安装了vue-devtools工具,但是发现图标一直是灰色,解决后,记录一下解决办法:1.查看拓展程序打开开发者模式和插件,如图所示两个开关,具体操作为:点击浏览器右上角三个点→更多工具→扩展工具......