当前位置:首页 > vue.js > 正文内容

vue3 ref store 使用数据需要获取value

自由小鸟2年前 (2023-01-10)vue.js1955

1,如果定义 let data=ref(‘’)
console.log(data.value)

2, vuex中的数据最好获取且

setup(props, ctx) {
    let store = useStore();
    let list = computed(() => {
      return store.state.list;
    });
    let add = (val) => {
      let flag = true;
      list.value.map((item) => {  //注意这里就是从vuex里拿来的数据也是需要.value获取内容
        if (item.title === val) {
          flag = false;
          alert("任务已存在");
        }
      });
      if (flag) {
        store.commit("addTodo", {
          title: val,
          complete: false,
        });
      }
    };
    let del = (index) => {
      store.commit("delTodo", index);
    };
    return {
      list,
      add,
      del,
    };
  },

vue3 main.js

import { createApp } from 'vue'
import './style.css'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import store from './store'
import request from './utils/request'
import storage from './utils/storage'
import ElementPlus from 'element-plus'
import api from './api'


const app = createApp(App)
app.config.globalProperties.$request = request
app.config.globalProperties.$storage = storage
app.config.globalProperties.$api = api //请求接口挂载到全局

app.use(store).use(router).use(ElementPlus).mount('#app')

语法糖setup写法

import { reactive, ref, getCurrentInstance } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
const { proxy, ctx } = getCurrentInstance(); //获取全局挂载的自定义变量
const router = useRouter();
const store = useStore();

版权声明:本文由Web学习之路发布,如需转载请注明出处。

本文链接:https://webge.net/?id=171

返回列表

上一篇:vue3项目提前准备

没有最新的文章了...

“vue3 ref store 使用数据需要获取value” 的相关文章

vue class style写法

class,第一种就是把判断的变量放在后面,前面就是判断之后要设置的class名称v-bind:class="{ active: isActive, 'text-danger': hasError }">data: {  isActive: tru...

vue3 新属性使用

vue3 新属性使用

setUp(){} //可以把所有数据和方法都放这里面一起导出,这个是在实现挂载之前就会执行的 ref基本的数据类型 reactive可以把数组,对象转成响应式 readonly处理之后的数据不能进行修改 toRefs可以把响应对象的某个解构出来的值变成响应式,如果原数据没有key,那就会...

vue 公告滑动效果

vue 公告滑动效果

适应只显示一条 <div class="marquee_box"> <ul class="marquee_list" :class="{marquee_top:animate}"> &l...

vue 时间戳转今天,昨天,以前时间

filters:{ formatDate(date) { const lastDate = new Date(date); lastDate.setHours(0); lastDate.setMinutes(0); lastDate.setSecon...

vue updateModel

vue updateModel

v-model高级用法...