目錄

• 介紹
• 開始
• 安裝
  
• ①直接下載方式
  
• ②CND方式
• ③NPM方式
• ④Yarn方式
• NPM方式安裝的使用方式
  
• store概念及使用
• 概念：
• 定義
• 使用
• mutations概念及使用
• 概念：
• 使用：
• 定義
• 使用
• action概念及使用
• 概念：
• 定義
• 使用
• getters概念及使用
• 概念：
• 定義
• 使用
• 總結

介紹

x是實現元件全域性狀態（資料）管理的一種機制，可以方便的實現元件之間的資料共享

開始

安裝

①直接下載方式

建立一個 vuex. 檔案 將https://unpkg.com/vuex這個網址裡的內容放到該資料夾裡。

②CND方式

<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>

③NPM方式

npm install vuex --save

④Yarn方式

yarn add vuex

NPM方式安裝的使用方式

1.在 scr 檔案裡建立一個 store / index.js 的資料夾，寫入以下內容。

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {},mutations: {},actions: {},modules: {}
})

2.在main.js 裡引入，然後掛載到 Vue 例項裡

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

store概念及使用

概念：

就是元件之間共享資料的。

只有 mutations 才能修改 store 中的資料

使用：

先定義後使用

定義

state: {
  num: 0
}

使用

方式1(推薦)

<div>{{ numAlias }}</div>

import { mapState } from 'vuex'
export default {
  //計算函式
  computed: mapState({
    // 傳字串引數 'count' 等同於 `state => state.count`
    numAlias: 'num',//常用key是自己起的名隨便 value接收的資料
    // 箭頭函式可使程式碼更簡練
    count: state => state.count,// 為了能夠使用 `this` 獲取區域性狀態，必須使用常規函式
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
    //可以定義其餘的計算函式
  }),//或者這樣
  //計算函式
  computed: {
    mapState(['count'])
  }
}

方式2

<div>{{ $store.state.count }}</div>

mutations概念及使用

概念：

修改store裡的資料，嚴格規定不能在其餘的地方修改store的資料，mutations裡不要執行非同步操作。

mutation 必須同步執行,不能非同步執行。

使用：

先定義方法後使用

定義

mutations: {
	//increment自定義方法 store引數是store資料,parameter引數是接收到的資料,可不要
    increment (state,parameter) {
        // 變更狀態
        state.num++
    }
}

使用

方式1(推薦使用)

import { mapState,mapMutations } from 'vuex'
//方法
methods: {
	...mapMutations([
	    // mutations自定義的方法名
    	'increment'
    ]),love() {
    	// 直接this呼叫 this.increment('需要傳過去的資料,可不要')
        this.increment('Bin')
    }
}

方式2

methods: {
    love() {
    	// this.$stwww.cppcns.comore.commit('自定義的名稱','傳過去的資料,可不傳')
    	this.$store.commit('increment','data')
    }
}

action概念及使用

概念：

用於處理非同步操作。

如果通過非同步操作變更資料，必須通過action，而不能使用mutation，但是在action中還是要通過觸發mutation的方式間接變更資料。

Action 類似於 mutation，不同在於：

• Action 提交的是 mutation，而不是直接變更資料(狀態)。
• Action 可以包含任意非同步操作。

定義

mutations: {
	//increment自定義方法 store引數是store資料,parameter) {
        // 變更狀態
        state.num++
    }
},actions: {
	//add 自定義方法 context是引數，可以把它當作vuex的例項
    add(context) {
    	//可以通過context.commit('mutations中需要呼叫的方法')
    	context.commit('increment')
    }
}

使用

方式1(推薦)

import { mapState,mapMutations,mapActions } from 'vuex'
export default {
  methods: {
    ...mapActwww.cppcns.comions([
      'add',// 將 `this.add()` 對映為 `this.$store.dispatch('add')`
      // `mapActions` 也支援載荷：
      'add' // 將 `this.add(amount)` 對映為 `this.$store.dispatch('add',amount)`
    ]),...mapActions({
      add: 'add' // 將 `this.add()` 對映為 `this.$store.dispatch('increment')`
    }),love() {
    	// 直接this呼叫 this.add('需要傳過去的資料,可不要')
    	this.add(data)
    }
  }
}

方式2

methods: {
    love() {
    	// this.$store.dispatch('自定義的名稱',可不傳')
    	this.$store.dispatch('add',data)
    }
}

getters概念及使用

概念：

getter用於對store中的資料進行加工處理形成新的資料。getting可以對store中已有的資料加工處理之後形成新的資料，類似Vue的計算縮寫。

定義

state: {
  num: 0
},getters: {
    doneTodos: state => {
    	return state.num = 10
    }
}

使用

方式1(推薦)

<div>{{ doneTodos }}</div>

import { mapState,mapActions,mapGetters } from 'vuex'
export default {
  //計算函式
  computed: {
  	...mapState(['count']),...mapmapGetters(['doneTodos'])
  }
}

方式2

<div>{{ $store.getters.doneTodos }}</div>

總結

本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更www.cppcns.com多內容!