VUEX的安装

记录一下自己安装vuex的过程及出现的问题和原因,如有错误,请各位大佬指正!

vuex的安装
首先,vuex分3.x版本和4.x版本,分别对应vue2.0与3.0
也就是说,vue2.0只能安装vuex3.x版本,最高3.6.2,vue3.0才能装vuex4.x版本

vuex3.x版本的官网安装教程:安装 | Vuex

vuex4.x版本的官网安装教程:安装 | Vuex

我使用的是npm,且为vue2.0版本,该环境安装流程应为:

1.npm install vuex --save

2.在src下新建文件夹store,并在文件夹中新建文件index.js,如下:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
  draftsObj: {}
}

const getters = {
  getDraftsObj: state => state.draftsObj

}

const mutations = {
  setDraftsObj(state, obj) {
    state.draftsObj = { ...obj };
  }
}

const actions = {

}

export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions
})

3.在main.js中引用,并添加到组件中,新增代码段如下:

import store from './store'

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

4.重启项目,到这里就可以在组件中使用vuex了,但是打开项目,发现报错:

Object(...) is not a function

查看代码发现是源码中的store.state的state为空,查了一下,很多都是说import xxx from 'xxx'改为import { xxx }from 'xxx',很显然我不是这个问题,问题在于我的vue是2.0版本但使用了vuex4.x版本,

在查看官网后,发现我的2.0vue使用的是vuex4.x版本,所以要改vuex版本,一开始采取的方法是指定版本号安装:npm install -g vuex@3.6.2,但是报警(npm WARN vuex@3.6.2 requires a peer of vue@^2.0.0 but none is installed. You must install peer dependencies yourself.大致意思是说我的vue版本应该是vue@^2.0.0),而且package.json中并没有vuex,

于是手动修改package.json中vuex的版本为"vuex": "3.6.2",再重新删除node_modules及package-lock.json,重新npm i,重启项目,至此我的项目安装vuex就成功了.

vuex4.x的版本安装过程也是2步,因并未实践,暂且不写.(官网教程里很清楚)