Day 86 VUE——Vuex
Vuex
Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。
Vuex的基本使用
第一步：vue create test_vuex
第二步：選擇含有 vue-router 與 vuex 的模板或者新建模板，注意一定要加 babel
第三步：cd test_vuex & npm run serve
import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 導入創建的 store
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
// 一定要掛載
store,
render: h => h(App)
}).$mount('#app')
<template> <div id="app"> <div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> | {{ $store.state.count }} </div> <router-view/> </div> </template> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } #nav { padding: 30px; } #nav a { font-weight: bold; color: #2c3e50; } #nav a.router-link-exact-active { color: #42b983; } </style>
import Vue from 'vue'
// 導入模塊
import Vuex from 'vuex'
// 使用當前插件
Vue.use(Vuex)
// 創建 store
export default new Vuex.Store({
state: { // 當前的狀態
count:0
},
mutations: { // 聲明同步的方法
plus(state){
// 修改狀態
state.count++
},
reduce(state){
state.count--
}
},
// 異步
// actions: { // 聲明異步的方法
// // commit mutations 中聲明的方法
// plus({commit}){
// commit('plus')
// },
// reduce({commit}){
// commit('reduce')
// }
// },
modules: {
}
})
<template> <div class="about"> <h1>This is an about page</h1> <button @click="plus">+1</button> <h2>{{ count }}</h2> <button @click="reduce">-1</button> </div> </template> <script> export default { computed:{ count(){ return this.$store.state.count; } }, methods:{ plus(){ // dispatch 觸發 actions 中聲明的方法(異步) // this.$store.dispatch('plus') // 同步 this.$store.commit('plus') }, reduce(){ // 異步 // this.$store.dispatch('reduce') // 同步 this.$store.commit('reduce') } } } </script>
為什么要使用actions
一旦牽扯到異步 一定要使用 actions 方法。不然界面顯示與后臺獲取的數據會不一致
import Vue from 'vue'
// 導入模塊
import Vuex from 'vuex'
// 使用當前插件
Vue.use(Vuex)
// 創建 store
export default new Vuex.Store({
state: { // 當前的狀態
count:0
},
mutations: { // 聲明同步的方法
plus(state){
// 修改狀態
state.count++
},
reduce(state){
state.count--
},
plusAsync(state){
state.count++
}
},
// 異步
actions: { // 聲明異步的方法
// // commit mutations 中聲明的方法
// plus({commit}){
// commit('plus')
// },
// reduce({commit}){
// commit('reduce')
// }
plusAsync({commit}){
commit('plusAsync')
}
},
modules: {
}
})
<template> <div class="about"> <h1>This is an about page</h1> <button @click="plus">+1</button> <h2>{{ count }}</h2> <button @click="reduce">-1</button> <button @click="plusAsync">+1 異步</button> </div> </template> <script> export default { computed:{ count(){ return this.$store.state.count; } }, methods:{ plus(){ // dispatch 觸發 actions 中聲明的方法(異步) // this.$store.dispatch('plus') // 同步 this.$store.commit('plus') }, reduce(){ // 異步 // this.$store.dispatch('reduce') // 同步 this.$store.commit('reduce') }, plusAsync(){ this.$store.commit('plusAsync') } } } </script>
Vuex系列的輔助函數的運用
import { mapState,mapGetters,mapMutations,mapActions } from 'vuex'
import Vue from 'vue'
// 導入模塊
import Vuex from 'vuex'
// 使用當前插件
Vue.use(Vuex)
// 創建 store
export default new Vuex.Store({
state: { // 當前的狀態
count:0,
username:'亦雙弓'
},
getters:{
odd_even(state){
return state.count % 2 === 0 ? '偶數' : '奇數'
}
},
mutations: { // 聲明同步的方法
plus(state){
// 修改狀態
state.count++
},
reduce(state){
state.count--
},
plusAsync(state){
state.count++
}
},
// 異步
actions: { // 聲明異步的方法
// // commit mutations 中聲明的方法
// plus({commit}){
// commit('plus')
// },
// reduce({commit}){
// commit('reduce')
// }
plusAsync({commit}){
commit('plusAsync')
}
},
modules: {
}
})
<template> <div class="about"> <h1>This is an about page</h1> <button @click="plus">+1</button> <h2>{{ myCount }} --- {{ odd_even }} --- {{ user }}</h2> <button @click="reduce">-1</button> <button @click="plusAsync">+1 異步</button> </div> </template> <script> import { mapState,mapGetters,mapMutations,mapActions } from 'vuex' export default { computed:{ // count(){ // return this.$store.state.count; // } // odd_even(){ // return this.$store.getters.odd_even; // }, // mapState 的使用 // ...mapState(['count']) ...mapState({ myCount:'count', user:'username' }), // mapGetters 的使用 ...mapGetters(['odd_even']) }, methods:{ // plus(){ // // dispatch 觸發 actions 中聲明的方法(異步) // // this.$store.dispatch('plus') // // 同步 // this.$store.dispatch('plus') // }, // 簡寫 mapActions 的使用 ...mapActions(['plus']), // reduce(){ // // 異步 // // this.$store.dispatch('reduce') // // 同步 // this.$store.commit('reduce') // }, // plusAsync(){ // this.$store.commit('plusAsync') // } // 簡寫 mapMutations 的使用 ...mapMutations(['reduce','plusAsync']) } } </script>
如何在組件內部提交數據給vuex
<template> <div class="about"> <h1>This is an about page</h1> <button @click="plus">+1</button> <h2>{{ myCount }} --- {{ odd_even }} --- {{ user }}</h2> <button @click="reduce">-1</button> <button @click="plusAsync">+1 異步</button> </div> </template> <script> import { mapState,mapGetters,mapMutations,mapActions } from 'vuex' export default { computed:{ ...mapState({ myCount:'count', user:'username' }), ...mapGetters(['odd_even']) }, methods:{ ...mapActions(['plus']), // 在組件內部提交數據 載荷形式分發 plusAsync(){ this.$store.dispatch('plusAsync',{ amount:10 }) }, // 簡寫 mapMutations 的使用 // ...mapMutations(['reduce','plusAsync']) ...mapMutations(['reduce']) } } </script>
import Vue from 'vue'
// 導入模塊
import Vuex from 'vuex'
// 使用當前插件
Vue.use(Vuex)
// 創建 store
export default new Vuex.Store({
state: { // 當前的狀態
count: 0,
username: '亦雙弓'
},
getters: {
odd_even(state) {
return state.count % 2 === 0 ? '偶數' : '奇數'
}
},
mutations: { // 聲明同步的方法
plus(state) {
// 修改狀態
state.count++
},
reduce(state) {
state.count--
},
// 接收值
plusAsync(state, amount) {
state.count += amount
}
},
// 異步
actions: { // 聲明異步的方法
// 傳入值
plusAsync({ commit }, { amount }) {
console.log(amount);
setTimeout(() => {
commit('plusAsync', amount)
}, 1000);
}
},
modules: {
}
})
浙公網安備 33010602011771號