Vuex學習（1）
1、什麼是Vuex
官方：Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。 我的理解：Vuex是管理應用程序的全局數據狀態，這樣任意組件均可以進行操做、修改、獲取全局數據。vue
2、建立vuexdemo項目實例
vue/cli3.x命令：vue create vuexdemoajax
安裝vuex命令：npm install --save-dev vuexvuex
項目結構圖：npm
3、建立store狀態
1）在src下建立store文件夾，而且建立index.js文件segmentfault
// 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的statebash
<!-- HelloWorld -->
<template>
<div class="hello">
<h1>{{ this.$store.state.name }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld'
}
</script>
<style scoped>
</style>
複製代碼
這時頁面出現Vuex的字樣app
4、使用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。
5、使用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的狀態值。
6、使用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下的方法。
7、使用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>
複製代碼
瀏覽器顯示
8、使用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的知識還未涉及。如有不明白和不足的地方，能夠留言一塊兒探究。
摘要
相關文章
- 1. Vuex對比Redux學習Vuex
- 2. [Vuex]Vuex學習手記
- 3. Vue學習（1）vue模板-vuex簡介
- 4. vuex學習---mutation
- 5. 學習vuex
- 6. Vuex學習
- 7. vuex學習---getter
- 8. VueX學習
- 9. vuex學習---action
- 10. vuex學習
- 更多相關文章...
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Vuex對比Redux學習Vuex
- 2. [Vuex]Vuex學習手記
- 3. Vue學習（1）vue模板-vuex簡介
- 4. vuex學習---mutation
- 5. 學習vuex
- 6. Vuex學習
- 7. vuex學習---getter
- 8. VueX學習
- 9. vuex學習---action
- 10. vuex學習