一、什麼是Vuex
官方：Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。 個人理解：Vuex是管理應用程式的全域性資料狀態，這樣任意元件都可以進行操作、修改、獲取全域性資料。
二、建立vuexdemo專案例項
vue/cli3.x命令：vue create vuexdemo
安裝vuex命令：npm install --save-dev vuex
專案結構圖：
三、建立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>
複製程式碼瀏覽器顯示
八、使用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的知識還未涉及。若有不明白和不足的地方，可以留言一起探究。