构建导入中的Vue脚本设置不可访问

hrirmatl  于 2022-11-17  发布在  Vue.js
关注(0)|答案(1)|浏览(103)

我的问题是,当我使用setup时,我不能在正常脚本中访问它,但只有在我以开发模式构建应用程序后,一切都正常。在本例中,我不能在我的logout函数中访问这个.authStore。
`

<script setup>
import { ref } from "vue";
import { storeToRefs } from "pinia";
import { useAuthStore } from "@/stores/auth-store";
const authStore = useAuthStore();
const { user } = storeToRefs(authStore);

const searchDropdown = ref(false);
const showSearchDropdown = () => {
  searchDropdown.value = true;
};
const hideSearchDropdown = () => {
  searchDropdown.value = false;
};
</script>

<script>
export default {
  name: "Top Bar",
  data() {
    return {
      pageName: this.$route.name,
    };
  },
  methods: {
    async logout() {
      await this.authStore.logout();
    },
  },
};
</script>

`

gpnt7bae

gpnt7bae1#

尝试只使用组合API来使代码一致,用函数替换logout方法,使用useRoute获取路由名称:

<script setup>
import { ref } from "vue";
import { usRoute } from 'vue-router'
import { storeToRefs } from "pinia";
import { useAuthStore } from "@/stores/auth-store";
const authStore = useAuthStore();

const { user } = storeToRefs(authStore);

const searchDropdown = ref(false);

const route = useRoute()
const pageName=route.name
const showSearchDropdown = () => {
  searchDropdown.value = true;
};
const hideSearchDropdown = () => {
  searchDropdown.value = false;
};

function logout(){
  authStore.logout();
}
</script>

相关问题