Vuex學習（1）

二月三十發表於2019-06-12
Vue

一、什麼是Vuex

官方：Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。 個人理解：Vuex是管理應用程式的全域性資料狀態，這樣任意元件都可以進行操作、修改、獲取全域性資料。

二、建立vuexdemo專案例項

vue/cli3.x命令：vue create vuexdemo

安裝vuex命令：npm install --save-dev vuex

專案結構圖：

Vuex學習（1）

三、建立store狀態

1）在src下建立store資料夾，並且建立index.js檔案

// store/index.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const state = {
	name:"Vuex",
}

const store = new Vuex.Store({
	state:state
})

export default store
複製程式碼

2）Vue使用store

//main.js

import Vue from 'vue'
import App from './App.vue'

//引入store/index.js
import store from "./store/index.js"

Vue.config.productionTip = false

new Vue({
	store,//Vue例項使用store（全域性使用）
  render: h => h(App),
}).$mount('#app')
複製程式碼

3）在HelloWorld.vue中獲取store的state

<!-- HelloWorld -->

<template>
  <div class="hello">
    <h1>{{ this.$store.state.name }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

<style scoped>
</style>
複製程式碼

這時頁面出現Vuex的字樣

四、使用Getters獲取狀態

getter相當於Vue的computed的屬性，用來監測變數的變化，監測state的最新狀態，getters也是屬於Store下的一部分（可以使用console.log(this.$store)列印出來觀察store已有的屬性及方法）。

// store/index.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const state = {
	name:"Vuex",
	age:25
}

const getters = {
	getName(state){
		return state.name;
	},
	getAge(state){
		return state.age;
	}
}

const store = new Vuex.Store({
	state,
	getters
})

export default store
複製程式碼

在HelloWorld.vue獲取getters

<!-- HelloWorld -->

<template>
  <div class="hello">
    <h1>{{ this.$store.getters.getAge }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

<style scoped>
</style>

複製程式碼

這時頁面顯示一個25。

五、使用mutations（同步）

mutations是用來修改state裡面的值，既然是修改值，修改的方法當然需要傳入修改的引數值。

// store/index.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const state = {
	name: "Vuex",
	age: 25
}

const getters = {
	getName(state) {
		return state.name;
	},
	getAge(state) {
		return state.age;
	}
}

const mutations = {
	setAge(state){
		state.age = 26;
		console.log("新增date",state.date);
		console.log("修改age",state.age);
	},
	setDate(state,date){
		state.date = date;
	}
}

const store = new Vuex.Store({
	state,
	getters,
	mutations
})

export default store


複製程式碼

HelloWorld.vue

<!-- HelloWorld -->

<template>
  <div class="hello">
    <h1>{{ this.$store.getters.getAge }}</h1>
		<button @click="$store.commit('setDate','2019')">新增Date</button>
		<button @click="$store.commit('setAge')">修改age</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

<style scoped>
</style>

複製程式碼

使用$store.commit('funcName',option)修改store的值，其中引數funcName為修改store的狀態值的函式名，option為函式名的引數（非state）。

這時連續點選兩個按鈕，瀏覽器控制檯列印出新增date 2019和修改age 26。由於mutations裡面只能是同步，不能進行非同步操作，類似ajax請求的就不能放置於mutations裡面。所以為了解決這個問題actions就出現了，action是可以進行任意的非同步操作，其實action也是操作mutation的。只有mutation才能改變state的狀態值。

六、使用actions（非同步）

// store/index.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const state = {
	name: "Vuex",
	age: 25
}

const getters = {
	getName(state) {
		return state.name;
	},
	getAge(state) {
		return state.age;
	}
}

const mutations = {
	setAge(state){
		state.age++;
		console.log("新增date",state.date);
		console.log("修改age",state.age);
	},
	setDate(state,date){
		state.date = date;
	}
}

const actions = {
	actionSetAge(comtext){
		comtext.commit('setAge');
	}
}

const store = new Vuex.Store({
	state,
	getters,
	mutations,
	actions
})

export default store

複製程式碼

HelloWorld.vue

<!-- HelloWorld -->

<template>
  <div class="hello">
    <h1>{{ this.$store.getters.getAge }}</h1>
		<button @click="$store.commit('setDate','2019')">新增Date</button>
		<button @click="$store.dispatch('actionSetAge')">修改age</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

<style scoped>
</style>

複製程式碼

這時點選修改age按鈕就可以實時改變大數字了。 在HelloWorld.vue中我們可以看到$store.dispatch('func',option),引數與commit的引數一樣的。其中actions下的方法也是執行mutation中的方法，比如comtext.commit('setAge');中的setAge就是mutation下的方法。

七、使用modules

1）store下建立modules資料夾，並且建立mod1.js和mod2.js檔案。 mod1.js

//mod1.js

const state = {
	name: "mod1.js"
};

const getters = {
	getMod1Name:function(state){
		return state.name;
	}
}

export default {
	namespaced: true, //namespaced:true 表示當你需要在別的檔案裡面使用( mapGetters、mapActions 接下來會說 )時，裡面的方法需要註明來自哪一個模組的方法
	state,
	getters
}
複製程式碼

mod2.js

//mod2.js

const state = {
	name:"mod2.js"
};

const getters = {
	getMod2Name:function(state){
		return state.name;
	}
}

export default {
	namespaced: true, //namespaced:true 表示當你需要在別的檔案裡面使用( mapGetters、mapActions 接下來會說 )時，裡面的方法需要註明來自哪一個模組的方法
	state,
	getters
}
複製程式碼

index.js

// store/index.js

import Vue from "vue";
import Vuex from "vuex";

//引入模組
import mod1 from "./modules/mod1.js";
import mod2 from "./modules/mod2.js";

Vue.use(Vuex);

const state = {
	name: "Vuex",
	age: 25
}

const getters = {
	getName(state) {
		return state.name;
	},
	getAge(state) {
		return state.age;
	}
}

const mutations = {
	setAge(state){
		state.age++;
		console.log("新增date",state.date);
		console.log("修改age",state.age);
	},
	setDate(state,date){
		state.date = date;
	}
}

const actions = {
	actionSetAge(comtext){
		comtext.commit('setAge');
	}
}

const modules = {
	mod1,
	mod2
}

const store = new Vuex.Store({
	state,
	getters,
	mutations,
	actions,
	modules
})

export default store

複製程式碼

HelloWorld.vue

<!-- HelloWorld -->

<template>
  <div class="hello">
    <h1>{{ this.$store.getters.getAge }}</h1>
		<button @click="$store.commit('setDate','2019')">新增Date</button>
		<button @click="$store.commit('setAge')">修改age</button>
		<p>{{this.$store.getters['mod1/getMod1Name']}}</p>
		<p>{{this.$store.getters['mod2/getMod2Name']}}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

<style scoped>
</style>
複製程式碼

瀏覽器顯示

Vuex學習（1）
modules的作用是將過多的資料分隔開，讓資料更加好管理。

八、使用mapGetters()等函式

mapGetters(option)就是this.$store.getters的寫法，只是option引數是對應getters定義的行函式。

HelloWorld.vue

<!-- HelloWorld -->

<template>
	<div class="hello">
		<h1>{{ this.$store.getters.getAge }}</h1>
		<button @click="$store.commit('setDate', '2019')">新增Date</button>
		<button @click="$store.commit('setAge')">修改age</button>
		<p>{{ getMod1Name() }}</p>
		<p>{{ getMod2Name() }}</p>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
	name: 'HelloWorld',
	methods: {
		...mapGetters({
			getMod1Name: 'mod1/getMod1Name',
			getMod2Name: 'mod2/getMod2Name'
		})
	}
};
</script>

<style scoped></style>
複製程式碼

頁面同樣可以顯示

mod1.js

mod2.js

總結

這一片就是vuex的入門，還有很多vuex的知識還未涉及。若有不明白和不足的地方，可以留言一起探究。

摘要

VueJS中學習使用Vuex詳解

相關文章