vue项目搭建以及全家桶的使用详细教程(小结)(7)

日期：2020-05-11 栏目：程序人生浏览：次

最后，我们在config目录下的index.js文件中，引入我们的代理规则,并在，即

var proxyConfig=require('./proxyConfig')
...//省略号表示省略其他代码
module.exports = {
...
proxyTable: proxyConfig.proxy,
...
}

重新启动项目，我们就可以做到代理转发来实现跨域请求了。

步骤九、vuex状态管理引入

终于，来到了最后一步，那就是我们的状态管理vuex，其实这个东西不是说所有项目都需要引入，看项目的具体需求，但需要对同一个数据源进行大量的操作的时候，建议使用，如果每个组件的数据都可以轻易的在data中管理，那其实是没必要引进去的，该管理工具是更友好的解决了组件间传值的问题，包括了兄弟组件；

首先，我们需要安装vuex,老规矩就是

npm install vuex

安装完成后，我们需要对我们的项目进行一些修改，首先是我们的目录，我们需要src下新增一个store文件夹作为vuex数据存放位置，在开始搭建前，我们需要有vuex的相关知识，我就不一一说明，自行百度一下vuex官方文档；众所周知，vuex有state,getter,mutation,action等关键属性，state主要是用于存放我们的原始数据结构，类似与vue的data,不过它是全局的，getter类似于计算属性computed,mutation主要用于触发修改state的行为，actions 也是一种触发动作，只不过与mutation的区别在于异步的操作我们只能在action中进行而不能在mutation中进行，目的是为了浏览器更好的跟踪state中数据的变化。

接下来，我们来看一下store文件夹中都有什么：

从上图可知，我创建了一个index.js入口文件，getters.js,mutation.js和mutationtypes.js,以及actions.js，下面我们先看看index.js的源码：

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

import actions from '@/store/actions.js'
import getters from '@/store/getters.js'
import mutations from '@/store/mutations.js'

Vue.use(Vuex)
const state = {
 recipeList:[],
 currRecipe:0
};
if (module.hot) {
 // 使 action 和 mutation 成为可热重载模块
 module.hot.accept(['./mutations'], () => {
  // 获取更新后的模块
  // 因为 babel 6 的模块编译格式问题，这里需要加上 `.default`
  const newMutations = require('./mutations').default;
  // 加载新模块
  store.hotUpdate({
   mutations: newMutations,
  })
 })
}
export default new Vuex.Store({
 state,
 mutations,
 getters,
 actions
})

首先，我们把Vuex插件引入vue中，并新建了一个Vuex.Store()对象，其中各项属性值来自我们前面所创建的文件夹，中间module.hot是配置我们的action和mutation成为可热重载的模块，对于我们的调试更方便，当我们创建为Vuex.store对象后，我们还需要把它声明到main.js的页面Vue对象中

vue项目搭建以及全家桶的使用详细教程(小结)(7)

相关推荐