【實例】Vuex小白入門：Vuex核心概念間的關係

Store倉庫中的屬性

首先此實例中的代碼本人寫在store倉庫中index.js的子模塊about中。

本實例的目錄結構是這樣的（例子中只用到about，只出現有關about的代碼）：

實例學習開始前準備

前提是已經安裝了vuex插件，還要在main.js中引入倉庫。

安裝vuex插件

npm install  vuex --save

main.js完整代碼

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'//引入store倉庫

Vue.config.productionTip = false

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

modules

子模塊，作用就是分開寫的頁面，可以通過子模塊引用到index中使用。

import about from './modules/about'
modules: {
     about
 }

index.js完整代碼

引入vuex的相關配置。

import Vue from 'vue'
import Vuex from 'vuex'
import about from './modules/about'

Vue.use(Vuex) // 顯式地通過 Vue.use() 來安裝 Vuex

const store = new Vuex.Store({
    state:{
    },
    getters:{
    },
    mutations:{
    },
    actions:{
    },
    modules: {
        about,
    }
});
export default store;

1、state

定義狀態，基本數據，唯一數據源。

state:{
	count:5,
	obj:{}
}

2、getters

相當於state的計算屬性，對state中數據進行計算。

getters:{
	newCount:state => state.count * 3
}

3、mutations

同步更改state中數據的方法。

mutations:{
	increment(state){//count的值+1
		state.count++
	},
	getParam(state,Object){//修改state中obj中的數據值
		state.obj = Object
	}
}

4、actions

提交mutation觸發方法，管理異步操作。

actions:{//接收dispatch傳遞過來的方法和參數
	getParamSync(context,Object){//處理異步操作
		setTimeout(()=>{//通過commit提交getParam
			context.commit('getParam',Object)
		},3000)
	}
}

about.js完整代碼

export default {
    // 定義狀態
    state: {
        count: 5,
        obj:{},
    },
    getters:{
        newCount:state => state.count * 3,
    },
    mutations: {
        increment (state) { // 增一
            state.count++
        },
        getParam (state,Object) {
            //修改state中的數據
            state.obj= Object
        }
    },
    //接受dispatch傳遞過來的方法和參數
    actions: {
        getParamSync (context,Object) {
            //處理異步操作
            setTimeout(()=>{
                //通過commit提交一個名爲getParam的mutation
                //action 函數接受一個與 store 實例具有相同方法和屬性的 context 對象，因此你可以調用 context.commit 提交一個 mutation
                context.commit('getParam',Object)
            },3000)
        },
    }
} 

.Vue文件中的屬性

5、method

寫業務邏輯，方法的調用。

methods:{
	increment(){//提交mutations中的increment方法
		this.$store.commit('increment')
	},
	getVal(){
		let name= 'xia';
        let age= '26';
        let sex= 'man';
        //通過dispatch將方法getParamSync和多個參數{name,age,sex}傳遞給actions
        this.$store.dispatch('getParamSync',{name,age,sex})
	}
}

6、computed

計算屬性，其中定義的方法雖然是方法，但是當作屬性使用。引用一些經過操作的數據。

computed:{
	count(){
		return this.$store.state.about.count;
	},
	obj(){
		return this.$store.state.about.obj;
	},
	newCount(){
		return this.$store.getters.newCount;
	}
}

7、調用

<div>
    <h3>about.js中count的值：{{count}}</h3>
    <button @click="increment">about加1</button>
    <h3>newCount的值：{{newCount}}</h3>

    <h3>about.js中obj的值：{{obj}}</h3>
    <button @click="getVal">點擊等待3秒獲取參數</button>
</div>

about.vue完整代碼

<template>
<div>
    <h3>about.js中count的值：{{count}}</h3>
    <button @click="increment">about加1</button>
    <h3>newCount的值：{{newCount}}</h3>
    <h3>about.js中obj的值：{{obj}}</h3>
    <button @click="getVal">點擊等待3秒獲取參數</button>
</div>
</template>

<script>
    export default {
        methods: {
            increment() {
                this.$store.commit('increment')
            },
            getVal() {
                let name= 'xia';
                let age= '26';
                let sex= 'man';
                //通過dispatch將方法getParamSync和多個參數{name,age,sex}傳遞給actions
                this.$store.dispatch('getParamSync',{name,age,sex})
            }
        },
        computed: {
            newCount(){
                return this.$store.getters.newCount;
            },
            count(){
                return this.$store.state.about.count;
            },
            obj(){
                return this.$store.state.about.obj;
            }
        }
    }
</script>
<style scoped>
</style>

總結

一開始不懂沒關係，腦袋暈乎乎的很正常，這個vuex狀態管理模式就是很繞，跟着流程看下來，具體操作一遍，搞清楚前後關係，其實也不難，一步一步跟着操作，學習，一定要專注與堅持。
不怕慢，就怕站。