|
搭建Vuex环境在src目录下创建一个文件夹store，在store文件夹内创建一个index.js文件 index.js用于创建Vuex中最核心的store
// scr/vuex/index.js // 引入Vueximport Vuex from 'vuex' // 用于响应组件中的动作const actions = {}// 用于操作数据const mutations = {}// 用于存储数据const state = {} // 创建storeconst store = new Vuex.Store({ actions, mutations, state}) // 导出storeexport default store// main.jsimport Vue from 'vue'import App from './App.vue'import Vuex from 'vuex'import store from './store/index' Vue.use(Vuex) new Vue({ render:h => h(App), store}).$mount('#app')但是这样会出现报错： [vuex] must call Vue.use(Vuex) before creating a store instance
意思为：[vuex] 在创建 store 实例之前必须调用 Vue.use(Vuex) 原因：在我们导入store的时候，先执行引入文件的代码，所以在执行以下代码时，引入的文件已经被执行了 既然这样子，那么我们交换import store from './store/index'，Vue.use(Vuex)两行代码 可是实际的结果是：[vuex] must call Vue.use(Vuex) before creating a store instance，依旧报错 原因：这是脚手架解析import语句的问题，会将import引入的文件提前，放在代码的最开始，也是最开始解析，然后解析本文件的代码 正确的写法： // scr/store/index.js // 引入Vuex和Vueimport Vuex from 'vuex'import Vue from 'vue' // 应用Vuex插件Vue.use(Vuex) // 用于响应组件中的动作const actions = {}// 用于操作数据const mutations = {}// 用于存储数据const state = {} // 创建storeconst store = new Vuex.Store({ actions, mutations, state}) // 导出storeexport default store// main.jsimport Vue from 'vue'import App from './App.vue'import store from './store/index' new Vue({ render:h => h(App), store}).$mount('#app')
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注51zixue.net的更多内容!
下载地址:
一篇文章带你入门和了解Jquery的基础操作
Vue双向绑定详解 |
