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，這則和之前使用的計算屬性相似，如果我們有需求需要對數據進行處理的話，則可以使用這個屬性，今天就到這裏