Vue项目实战踩坑（vuex的使用）

Vue项目实战踩坑（vuex的使用）
今天在项目开发中遇到了一个老大难的问题，那就是多个组件之间的传值问题，毫无疑问，这个问题，可以通过父子组件传值的方式完成，但是如果组件之间没有关系呢，是不是就无法传值了呢，对的，确实无法传值，我们引入一个大管家，vuex，我们借助它；进行公共数据的管理，首先由于借助于脚手架，我们要现在创建项目的时候，加入我们的vuex模块，但是如果没有在开始引入vuex的话，则可以使用指令安装vuex

npm install vuex --save

之后，我们可以在main,js中进行如下操作，引入此插件

import Vuex from 'vuex'
Vue.use(Vuex)

启用vuex，不过对于我们的项目，更合理的做法是单独建立stroe文件夹，然后在里面创建js文件单独写出vuex的配置，这样可以简化操作

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

Vue.use(Vuex)

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

在这里暴露出一个对象以后，我们就可以在main,js中，引用我们的stroe

import Vue from 'vue'
//我们挂载的组件文件
import App from './App.vue'
//我们使用的路由js
import router from './router'
import store from './store'
//引入elementui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Login from './views/login.vue'
//import './assets/style.css'
//import './assets/flows.js'
import axios from 'axios'

Vue.prototype.$axios = axios
//这里设置了一个根url,我们所有的请求都会在localhost:8080后面加一个/api
//举个例子:原来请求localhost:8080/admin/login---->localhost:8080/api/admin/login
//而我们新加上的vue.config.js里面配置了一个代理,他会把/api和之前的内容变成target的值
//还是上面的例子, 假设target: 'http://localhost:8088/'
//那么最终的请求是localhost:8088/admin/login,确实神奇
axios.defaults.baseURL = '/api'
axios.defaults.headers.post['Content-Type'] = 'application/json';

//启动外部插件
Vue.use(ElementUI)
Vue.config.productionTip = false

var filename1, filename2, filename3

new Vue({
	el:'#app',
	data:{
		
	},
	methods:{
		mounted:function(){
			router.push('/login')
		}
	},
	router,
	store,
	render: h => h(App)
})

不难发现，这里的vuex和路由使用方法大致相同，vuex有几个核心，那就是，state, getter, mutations等，在这里简单介绍，state就是我们要使用的数据，这是一个对象，里面可以放我们的数据，加入里面有一个数据counter，我们先定义这样的一个数据

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
	  counter:100
  },
  mutations: {
	  add(state){
		  state.counter++
	  },
	  decl(state){
		  state.counter--
	  }
  },
  actions: {
  },
  modules: {
  }
})

接下来，我们在自定义的vue组件中，可以使用命令获取，如下所示

<h2>{{$store.state.counter}}</h2>

我们往往还期待能够改变数据，这就要依赖于我们的mutations，vuex官方推荐我们使用这种方式改变大管家的数据，也就是在这里声明方法，然后在其他组件中使用即可，我们定义好了add方法，在组件中，我们可以借助于comment()，方法实现调用，如下所示

<template>
	<div>
		<h2>recordsumary组件</h2>
		<h2>{{$store.state.counter}}</h2>
		<el-row>
			<el-button type="primary" v-on:click="add">+</el-button>
			<el-button type="danger" v-on:click="decl">-</el-button>
			<el-button type="infor" v-on:click="addn(10)">+10</el-button>
			<el-button type="infor" v-on:click="addn(15)">+15</el-button>
			<el-button type="success" v-on:click="addperson">添加成员</el-button>
		</el-row>
		<h2>-----------------------------------------</h2>
		<h2>{{$store.state.persons}}</h2>
	</div>
</template>

<script>
	export default {
		data:function(){
			
		},
		methods:{
			add:function(){
				this.$store.commit('add')
			},
			decl:function(){
				this.$store.commit('decl')
			},
			addn:function(num){
				this.$store.commit('addn', num)
			},
			addperson:function(){
				var person = {id:1, name:'张飞', age:12}
				this.$store.commit('addperson', person)
			}
		}
	}
</script>

<style>
</style>

值得指出的是，我们的方法，可以传入参数，可以根据我们的需求自定义，而对于我们的getter，这则和之前使用的计算属性相似，如果我们有需求需要对数据进行处理的话，则可以使用这个属性，今天就到这里