vue3 使用 store

最新推荐文章于 2024-09-03 21:44:01 发布

ymsxxx

最新推荐文章于 2024-09-03 21:44:01 发布

阅读量1.6k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/ymsxxx/article/details/137412911

版权

本文介绍了在Vue3的ScriptSetup中正确地导入和使用Vuexstore，包括获取store实例、状态(state)、getters以及mutations和actions的正确调用方式，同时指出了常见的错误用法，如避免在setup中使用`this.$store`和非标准的getter函数调用。

摘要由CSDN通过智能技术生成

<script>
import { getCurrentInstance } from "vue";
import { useStore } from "vuex";
export default {
  setup() {
    // 第一种方法：获取路由对象 router 的方法1
    const vue = getCurrentInstance();  // 使用vue 方法
    const store1 = vue.ctx.$store;
    console.log(store1);
    console.log(store1.state.userinfo.name);
    console.log(store1.getters.getUserInfo.name);
    // 第二种方法：获取路由对象 router 的方法2
    const store2 = useStore();   // 使用vuex 方法
    console.log(store2);
    console.log(store2.state.userinfo.name);
    console.log(store2.getters.getUserInfo.name);

    // 下面提供了：store 对应的属性使用大全
    // ------------------------------------------------------
    // commit(type, payload, options2) 在其他视图中使用mutations中定义的方法
    // dispatch(type, payload) 异步任务 不会改变state 在其他视图中使用actions中定义的方法
    // getters: {}  相当于组件的计算属性 通过 $store.getters.doubleCount 获取计算后的值
    // state: (...)  store中存储的值，就是通过这个在视图中获取store存储的值
    return {};
  },
  mounted() {
    // 第三种方法：获取路由对象 store的方法3
    console.log(this.$store);  // 使用this方法
    console.log(this.$store.state.userinfo.name);
    console.log(this.$store.getters.getUserInfo.name);
  },
};
</script>

在 script setup 中使用store

<script setup>
import { useStore } from 'vuex';
const store = useStore();
console.log(store.getters.getUserInfo.name);
</script>

错误用法

<script setup>
1. setup 中没有 this 的概念，所以无法使用 this.$store 访问
// console.log(this.$store.getters.getUserInfo.name); setup中无法使用
2. getters 中定义的函数，无法使用 getUserInfo() 访问， 只能用 getUserInfo 访问
// const count = this.$store.getters.getUserInfo();
// const username = count.username;

3. getUserInfo 方法 ，不是 vuex 中规定的引入方法，所以无法使用
// import { getUserInfo } from 'vuex';
// console.log(getUserInfo().name);  无法使用
</script>