vuex基礎

vuex

Vuex是什麼呢？它是Vue的狀態管理模式，在使用vue的時候，須要在vue中各個組件之間傳遞值是很痛苦的，在vue中咱們可使用vuex來保存咱們須要管理的狀態值，值一旦被改變，全部引用該值的地方就會自動更新。是否是很方便，很好用呢？

vuex是專門爲vue.js設計的狀態管理模式，集中式存儲和管理應用程序中全部組件的狀態，vuex也集成了vue的官方調式工具，一個vuex應用的核心是store，一個容器，store包含了應用中大部分狀態。

那麼咱們在何時應用vuex呢？vuex也不是隨便亂用的，小型簡單的應用就不那麼合適了，由於用了Vuex是繁瑣多餘的，更適合使用簡單的store模式；對於vuex更加適用於中大型單頁應用：多個視圖使用於同一狀態，不一樣視圖須要變動同一狀態。

vuex狀態管理

實現組件間數據共享

集中式存儲和管理應用程序中全部組件的狀態

一個 Vuex 應用的核心是 store（倉庫，一個容器），store包含着你的應用中大部分的狀態 (state)。

傳參的方法對於多層嵌套的組件來講，是很是繁瑣的，而且對於兄弟組件間的狀態傳遞無能爲力；採用父子組件直接引用或者經過事件來變動和同步狀態的多份拷貝，一般會致使沒法維護的代碼。

什麼狀況下我應該使用 Vuex

適用於：中大型單頁應用，無論在哪一個組件，都能獲取狀態/觸發行爲

解決問題以下：

① 多個視圖使用於同一狀態：

傳參的方法對於多層嵌套的組件將會很是繁瑣，而且對於兄弟組件間的狀態傳遞無能爲力

② 不一樣視圖須要變動同一狀態：

採用父子組件直接引用或者經過事件來變動和同步狀態的多份拷貝，一般會致使沒法維護的代碼

安裝命令：

在項目文件夾下vue install vuex

• vuex 裏面 actions 只是一個架構性的概念，並非必須的
• Action 提交的是 mutation，而不是直接變動狀態
• Mutation：必須同步執行
• Action：能夠異步,但不能直接操做State

建立一個vue項目，輸入vue int webpack web，安裝vuex，命令：npm install vuex --save。

store，index.js

import Vue from 'vue' // 引入vue
import Vuex from 'vuex' // 引入vuex
// 使用vuex
Vue.use(Vuex);
// 建立Vuex實例
const store = new Vuex.store({
})
export default store // 導出store

main.js

import Vue from 'Vue'
import App from './App'
import router from './router'
import store from '.store'

Vue.config.productiontip = false

new Vue({
el: '#app',
store,
router,
components: {App},
...
})

State，能夠在頁面經過this.$store.state來獲取咱們定義的數據：

import Vue from 'vue' // 引入vue
import Vuex from 'vuex' // 引入vuex
// 使用vuex
Vue.use(Vuex);

// 建立Vuex實例：
const store = new Vuex.Store({
state: {
count: 1
}
})
export default store // 導出store

{{this.$store.state.count}}

Getters至關於vue中的computed計算屬性，getter的返回值根據它的依賴被緩存起來，且只有當它的依賴值發生改變時纔會從新計算。

Getters能夠用於監聽，state中的值的變化，返回計算後的結果。

{{this.$store.getSateCount}}

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
count: 1;
},
getters: {
getStateCount: function(state){
return state.count+1;
}
}

Mutations

{{this.$store.state.count}}
<button @click="addFun">+</button>
<button @click="reductionFun">-</button>

methods: {
addFun() {
this.$store.commit("add");
},
reductionFun() {
this.$store.commit("reduction");
}
}

index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
// 建立Vuex實例
const store = new Vuex.store({
state: {
count: 1
},
getters: {
getStateCount: function(state){
return state count+1;
}
},
mutations: {
add(state) {
state.count = state.count+1;
},
reduction(state){
state.count = state.count-1;
}
}
})
export default store // 導出store

Actions:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
count: 1;
},
getters: {
getStateCount: function(state){
return state.count+1;
}
}
mutations: {
add(state) {
state.count = state.count+1;
},
reduction(state) {
state.count = state.count-1;
}
},
actions: {
addFun(context) {
context.commit("add");
},
reductionFun(context) {
context.commit("reduction");
}
}

// vue
methods: {
addFun() {
this.$store.dispatch("addFun");
// this.$store.commit("add");
},
reductionFun() {
this.$store.dispatch("reductionFun");
}
}

傳值：

methods: {
addFun() {
this.$store.dispatch("addFun");
// this.$store.commit("add");
},
reductionFun() {
var n = 10;
this.$store.dispatch("reductionFun", n);
}
}
mutations: {
add(state) {
state.count = state.count+1;
},
reduction(state,n) {
state.count = state.count-n;
}
},
actions: {
addFun(context) {
context.commit("add");
},
reductionFun(context,n) {
context.commit("reduction",n);
}
}