通过Vuex实现Input双向绑定

news/2024/7/10 1:47:54 标签: vue, 前端

store.js:

store = new Vuex.store({
    state:{
      inputVal: ''
    },
    mutations:{
      setInput (state, newVal) {
        state.inputVal = newVal
      }
    } }) 

页面中绑定:

<template>
  <div>
    <input v-model = 'storeVal'>
  </div>
</template>
<script>
export default {
  computed: {
    storeVal (e) {
      get() {
        return this.$store.state.inputVal
      },
      set(newVal) {
        this.$store.commit('setInputVal', newVal)
     }
    }
  }
}
</script>

http://www.niftyadmin.cn/n/1143441.html

相关文章

TypeScript泛型及其一些写法

Vue3拥抱Typescript之泛型 // 平常写ts可能会这样注解类型&#xff0c;但是这样有些麻烦&#xff0c;能不能简洁点呢 //function joi(first: string | number,second: string | number){ // return first second //} // JJ是泛型&#xff0c;在最简单的泛型用法中可以类比形参…

Vue3警告[Vue warn]: Avoid app logic that relies on enumerating keys on a component instance.

在Vue3中使用watch监听useRoute()的时候&#xff0c;控制台报出警告&#xff1a; [Vue warn]: Avoid app logic that relies on enumerating keys on a component instance. The keys will be empty in production mode to avoid performance overhead. watch&#xff08;rout…

JWT---Token身份令牌验证

什么是Token&#xff1f; 在计算机身份认证中是令牌&#xff08;临时&#xff09;的意思&#xff0c;在词法分析中是标记的意思。一般我们所说的的token大多是指用于身份验证的token 为什么使用token? 我们需要每次都知道当前请求的人是谁&#xff0c;但是又不想每次都让他提交…

Vue3中axios如何使用路由(useRouter)以及自定义hooks中使用useRouter报错问题(已踩坑)

随着vue3的更新,vue-router也更新到了4.x useRouter 相当于vue2的this.$router全局的路由实例&#xff0c;是router构造方法的实例 useRoute 相当于vue2的this.$route表示当前激活的路由的状态信息&#xff0c;包含了当前 URL 解析得到的信息&#xff0c;还有 URL 匹配到的 r…

React生命周期钩子函数(图示)

&#xff08;旧&#xff09; &#xff08;新&#xff09; 1.React16新的生命周期弃用了componentWillMount、componentWillReceivePorps&#xff0c;componentWillUpdate 2.新增了getDerivedStateFromProps、getSnapshotBeforeUpdate来代替弃用的三个钩子函数&#xff08;co…

解决React中多级路径刷新页面样式丢失问题

1.public/index.html 中引入样式时不写 ./ 而是写 / &#xff08;常用&#xff09; 2.public/index.html 中引入样式时不写 ./ 而是写 %PUBLIC_URL% &#xff08;常用&#xff09; 3.使用HashRouter

Vue3警告:[Vue warn]: Extraneous non-emits event listeners (changeParentProps) were passed to component

在Vue3中组件通信中&#xff08;子传父&#xff09;报出如下警告&#xff1a; [Vue warn]: Extraneous non-emits event listeners (changeParentProps) were passed to component but could not be automatically inherited because component renders fragment or text root…

手撕Promise和Async await原理

Promise原理&#xff1a; const PENDING pending; const FULFILLED fulfilled; const REJECTED rejected;class MyPromise { status PENDING; // 状态一经改变就不可变value null;reason null;successCallback null;failCallback null;constructor(executor) {this.re…