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,如下:

1.  
   import Vue from 'vue'
2.  
   import Vuex from 'vuex'
3.  
    
4.  
   Vue.use(Vuex)
5.  
    
6.  
   const state = {
7.  
   draftsObj: {}
8.  
   }
9.  
    
10.  
    const getters = {
11.  
    getDraftsObj: state => state.draftsObj
12.  
     
13.  
    }
14.  
     
15.  
    const mutations = {
16.  
    setDraftsObj(state, obj) {
17.  
    state.draftsObj = { ...obj };
18.  
    }
19.  
    }
20.  
     
21.  
    const actions = {
22.  
     
23.  
    }
24.  
     
25.  
    export default new Vuex.Store({
26.  
    state,
27.  
    getters,
28.  
    mutations,
29.  
    actions
30.  
    })

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

1.  
   import store from './store'
2.  
    
3.  
   new Vue({
4.  
   router,
5.  
   store,
6.  
   render: h => h(App)
7.  
   }).$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步,因并未实践,暂且不写.(官网教程里很清楚)

这篇好文章是转载于：学新通技术网