vue.js - Vuejs 和 vuex,无法读取属性“$store”
问题描述
我正在尝试读取/访问我的 vuex 存储,但我收到错误“无法读取未定义的属性 '$store',为什么?
这是我尝试过的......
我在单独的 store.js 文件中创建了一个 Vuex 商店。
import Vuex from "vuex";
import Vue from "vue";
import { Auth } from "aws-amplify";
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
user: null
},
actions: {
// AWS signup action.
async signUp({ commit }, { username, password, firstName, lastName }) {
const data = await Auth.signUp({
username,
password,
attributes: {
given_name: firstName,
family_name: lastName
}
});
console.log(data);
}
}
});
接下来,我在我的main.js Vue 实例中注册了它。
import Vuex from 'vuex'
import Vue from 'vue'
// Provide an initial state object for Vuex.
import store from './util/store.js';
Vue.use(Vuex)
/* eslint-disable no-new */
new Vue({
el: '#app',
store: store, // Vuex mechanism to "inject" the store into all child components from the root component.
render: h => h(App),
router
})
我尝试访问商店,即。console.log(this.$store) <---- 找不到 this.$store
在我的注册中,vue:
etc
</template>
<script>
import AppNavbar from './Layout/AppNavbar'
import AppFooter from './Layout/AppFooter'
import { Card, Checkbox, Button, InfoSection } from 'src/components/UIComponents';
export default {
components: {
Card,
AppNavbar,
AppFooter,
InfoSection,
[Checkbox.name]: Checkbox,
[Button.name]: Button,
},
data(){
return {
form: {
email: '',
password: '',
acceptTerms: true,
}
}
},
methods: {
async submitReg() {
console.log(this.$store)
.........
解决方案
您错过了export default
您的商店:
export default new Vuex.Store({
...
并在商店创建中使用Vue.use(Vuex)
一次,因为Vue.use(Vuex)
希望您在此之后定义一个商店实例,而这不是这种情况,main.js
并且它忽略了已经创建的商店。
推荐阅读
- python - 无法登录到 Django 管理面板
- java - 来自 Singleton 类的实例化对象具有空引用
- javascript - 是否可以定义一个拥有和操纵其自身值的对象?
- node.js - 如何从 ms 团队聊天 BotBuilder 上的上下文 onConversationUpdate 获取语言环境
- java - 如何读取 WSDL 文件中的环境变量?
- svn - 带有子剪辑的 CCS:为什么标签装饰和快速差异仅适用于位于项目文件夹中的文件?
- javascript - Javascript 密钥处理程序替代方案
- javascript - 如何在不点击(按钮)的情况下检查元素是否有子元素
- python - 使用 LXML 插入元素并设置属性和文本
- python - 是否可以在同一网络内的其他 docker 容器退出后停止 docker 容器?