Vuex 理解 與 知識的詳解

一 關於存儲跟數據動態傳輸的問題。我這邊提到了vuex 倉庫 管理 體系。首先我來講一下關於vuex的理解。 先說一下關於 vuex 究竟是什麼？ 官方的解釋意思是 程序開發的狀態管理模式 這個狀態咱們能夠累計額在data的屬性裏面。 須要共享其餘組件使用的部分。 也就是說 ，咱們的須要共享data，使用vuex 進行統一中式管理 二 vuex 中的默認五種基本對象 state 存儲狀態。 getters 對象數據獲取以前的再次編輯，能夠理解爲state計算屬性。咱們的組件中使用$sotre.gerers.fun() mutations 修改狀態，並同步，在組件中使用$store.commit('params') 這個和咱們組件中自定義類型保持一致性 actions 異步操做。在組件中使用$store.dispath('') 能夠分佈式進行 modules：store的子模塊，爲了開發大型項目，方便狀態管理而使用的。這裏咱們就不解釋了，用起來和上面的同樣。

三 下面對案例作必定的概括 1 首先先更新vuex 依賴包 cnpm run vuex --save

2 建立後執行響應的代碼。
      cd app/
      npm run dev
 
 3 接下來咱們在src目錄下建立一個vuex文件夾

   並在vuex文件夾下建立一個store.js文件

   文件夾目錄長得是這個樣子

四、目前咱們尚未引入vuex，咱們須要先下載vuex，而且引入它

	在保證咱們處於咱們項目下，在命令行輸入下面命令，安裝vuex

	npm install vuex --save
	
	五、安裝成功以後，咱們就能夠在store.js中盡情玩耍咱們的vuex了！

    在store.js文件中，引入vuex而且使用vuex，這裏注意個人變量名是大寫Vue和Vuex　
		import Vue from 'vue'
		import Vuex from 'vuex'

		Vue.use(Vuex)
		const state = {
			count: 0
		}
		export default new Vuex.Store({
			state
		})

接下來，在main.js中引入store
				import Vue from 'vue'

				import App from './App'

				import router from './router'

				import store from './vuex/store' // 引入store

				Vue.config.productionTip = false

				/* eslint-disable no-new */
				new Vue({
				el: '#app',
				router,
				store,
				components: { App },
				template: '<App/>'
				})

				然我咱們在任意一個組件中就可使用咱們定義的count屬性了。

				這裏咱們在helloWorld中使用一下，去除helloworld.vue中不用的標籤

				<template>
				  <div class="hello">
					<h3>{{$store.state.count}}</h3>
				  </div>
				</template>