Vue 搭建Vuex环境详解

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› JavaScript›JavaScript编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

搭建Vuex环境

在src目录下创建一个文件夹store，在store文件夹内创建一个index.js文件

index.js用于创建Vuex中最核心的store

//  scr/vuex/index.js
 // 引入Vuex
import Vuex from 'vuex'
 // 用于响应组件中的动作
const actions = {}
// 用于操作数据
const mutations = {}
// 用于存储数据
const state = {}
 // 创建store
const store = new Vuex.Store({
    actions,
    mutations,
    state
})
 // 导出store
export default store

//  main.js
import 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和Vue
import Vuex from 'vuex'
import Vue from 'vue'
 // 应用Vuex插件
Vue.use(Vuex)
 // 用于响应组件中的动作
const actions = {}
// 用于操作数据
const mutations = {}
// 用于存储数据
const state = {}
 // 创建store
const store = new Vuex.Store({
    actions,
    mutations,
    state
})
 // 导出store
export default store

//  main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store/index'
 new Vue({
    render:h => h(App),
    store
}).$mount('#app')