在script 中使用store
https://blog.csdn.net/SubStar/article/details/116077737
<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>