前端vue学习之搭建vuex的环境

一、下载vuex

        每学习一个新玩意儿，最先的肯定就是下载它了，这里我们先用vue-cli 3创建一个项目，然后通过

npm i vuex

先下载vuex，当你看见项目文件夹的 package.json 文件内的第13行左右显示有vuex的版本的时候，那就是下载好了，就像这样

 

 

 二、导入vuex

        光安装还不够，肯定嘚导入，我们在main.js文件中，写入导入代码

import Vuex from 'vuex'

 导入完后再use安装一下

Vue.use(Vuex)

三、创建vuex有关文件夹

        引入完vuex后，我们在src目录下创建一个store文件夹，内加index.js文件就像这样

 这部分文件，以后就用于写vuex相关的代码。

四、写index.js的基本代码

        这部分其实也就是写好你要使用vuex的一些基本代码，从官网上的流程图，可以看出，有一些基本的配置项是不可缺少的，最基础的就是actions , mutations , state。 

因此，我们要在index.js文件夹中创建三个对象

const actions = {
    //用于存放需要进一步判断的事件
}

const mutations = {
    //用于存放直接进行的事件
}

const state = {
    //用于存放数据
}

创建完后，肯定嘚放在Store中然后导出

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

再导入main.js文件中让它起效果

import store from './store'

还要在new Vue中添加好store

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

这样配置完后，无论是App.vue文件，还是其他组件都多了一个$store属性，这个属性就是后面进行vuex学习不可缺少的一个属性。

五、一个小问题

        如果只是配到上面那一步，那肯定是有问题的，我们不妨用浏览器打开项目，会发现报错了

 这个错误的意思是Vue.use(Vuex)这串安装vuex的代码必须在引入我们自己写的store文件之前被引入，但根据js文件的机制，import的文件无论放在哪总是在最后会被移到文件的最前面被解析，所以，在main.js文件中无论这样切换二者位置都是无用功。

        对此，我们不妨将Vue.use(Vuex)直接写入store文件夹的index.js内，改变安装的位置后再观察浏览器，就不报错了。

六、检查$store

        最后为了保险起见，在检查一下，是不是真的多了$store这个属性，我们在App.vue文件下用一个周期函数打印一下this观察

  mounted () {
    console.log(this);
  }

在浏览器中打开发现确实多了$store属性，里面也有很多东西，都是以后会用的

 到此，vuex的环境就搭建完毕。