什么是vuex？
Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。
什么情況下使用vuex？
如果您不打算開發大型單頁應用，使用 Vuex 可能是繁瑣冗余的。確實是如此——如果您的應用夠簡單，您最好不要使用 Vuex。一個簡單的 store 模式就足夠您所需了。但是，如果您需要構建一個中大型單頁應用，您很可能會考慮如何更好地在組件外部管理狀態，Vuex 將會成為自然而然的選擇。
vuex流程？
vuex引用？
1.如果項目安裝時沒有集成vuex，那么首先安裝vuex：
npm install vuex --save
2.在main.js中注入：
import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) }).$mount('#app')
state在項目中的運用？
store目錄下的index.js
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { peopleList:[ {name:'zql',age:20}, {name:'lyh',age:22}, {name:'zjk',age:25}, ] }, mutations: { }, actions: { }, modules: { } })
HelloWorld.vue組件中
<template> <div class="hello"> <h1>{{ msg }}</h1> <div v-for="(item,index) in peopleList" :key="index"> <p>姓名：{{item.name}}，年齡：{{item.age}}</p> </div> </div> </template> <script> export default { name: 'HelloWorld', props: { msg: String }, data () { return { peopleList: this.$store.state.peopleList } } } </script>
============================================================================================
效果：
=============================================================================================
state是vuex的唯一數據源，是所有組件的公共data。
在組件中，使用this.$store.state.peopleList獲取state中的數據。
如果需要獲取多個state，可使用...mapState輔助函數：
store目錄下的index.js
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { peopleList:[ {name:'zql',age:20}, {name:'lyh',age:22}, {name:'zjk',age:25}, ], desList:[ {des:'一桿梅子酒'}, {des:'逍遙抖機括'}, {des:'烈酒送入喉'}, ] }, mutations: { }, actions: { }, modules: { } })
HelloWorld.vue組件中
<template> <div class="hello"> <h1>{{ msg }}</h1> <div v-for="(item,index) in peopleList" :key="index"> <p>姓名：{{item.name}}，年齡：{{item.age}}</p> <p>{{desList[index].des}}</p> </div> </div> </template> <script> import {mapState} from 'vuex' export default { name: 'HelloWorld', props: { msg: String }, data () { return { // peopleList: this.$store.state.peopleList } }, computed: { ...mapState(['peopleList','desList']) } } </script>
====================================================================
效果：
====================================================================
getters項目中的運用？
getters: { computedPeopleList: (state) => { let newName = state.peopleList.map((item)=>{ return { name: '*' + item.name + '*', age: item.age } }) return newName; } },
HelloWorld.vue組件中
data () { return { // peopleList: this.$store.state.peopleList, peopleList: this.$store.getters.computedPeopleList } },
getters用於從
state中派生出一些狀態，例如對列表進行過濾等。可以將
getters理解為計算屬性
computed，
getter的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變才會被重新計算。
getters接受
state作為其第一個參數。
store.js中添加一個
getter屬性：
computedPeopleList，用於修改顯示名字。
this.$store.getters.computedPeopleList獲取
getters中的數據。
getters，可使用
...mapGetters輔助函數
import {mapState,mapGetters} from 'vuex'
computed: {
...mapState(['desList']),
...mapGetters(['computedPeopleList'])
}
mutations在項目中的運用？
vuex的
store中的狀態的唯一方法是提交
mutation。
vuex中的
mutation類似於事件：
每個mutation都有一個字符串的事件類型和一個回調函數。
state作為第一個參數（
payload為第二個參數，也就是自定義參數）。
此時，我們給store添加個mutation屬性，用於點擊按鈕時修改描述：
store目錄下的index.js
mutations: { updateDesList: (state,payload) => { return state.desList.forEach((item) => { item.des = payload + '何妨千金與落魄' }) } },
HelloWorld.vue組件中
methods: { changeDes(){ this.$store.commit('updateDesList','肝膽催月落，') } }
==========================================================================
點擊按鈕效果：
==========================================================================
同樣，可通過mapMutations映射mutations
store目錄下的index.js
state: { peopleList:[ {name:'zql',age:20}, {name:'lyh',age:22}, {name:'zjk',age:25}, ], desList:[ {des:'一桿梅子酒'}, {des:'逍遙抖機括'}, {des:'烈酒送入喉'}, ], listName: '四爺' }, mutations: { updateDesList: (state,payload) => { return state.desList.forEach((item) => { item.des = payload + '何妨千金與落魄' }) }, reUpdate: (state,status) => { state.listName = status; } },
HelloWorld.vue組件中
import {mapState,mapGetters,mapMutations} from 'vuex'
methods: {
changeDes(){
this.$store.commit('updateDesList','肝膽催月落，')
},
...mapMutations(['reUpdate']), //將this.$store.commit() 映射為 this.reUpdate()
updateName(){ this.reUpdate('牧馬城市') //等同於this.$store.commit('reUpdate','牧馬城市')
}
}
<h2 @click="updateName">{{ listName }}</h2>
action在項目中的運用？
action類似於mutation，不同之處在於：
1.action提交的是mutation，而不是直接變更狀態。
2.action可以包含異步操作，而mutation不行。
3.actions中的回調函數的第一個參數是context, 是一個與store實例具有相同屬性和方法的對象。
4.action通過store.dispatch方法觸發，mutation通過store.commit方法提交。
store目錄下的index.js
actions: { saveListName({commit},status){ commit('reUpdate',status) } },
HelloWorld.vue組件中
reUpdateName(){ let self = this; self.$store.dispatch('saveListName','靈魂不再無處安放') }
同樣，可通過mapActions映射actions，類似mapMutations：
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
methods: {
changeDes(){
this.$store.commit('updateDesList','肝膽催月落，')
},
...mapMutations(['reUpdate']), //將this.$store.commit() 映射為 this.reUpdate()
updateName(){
this.reUpdate('牧馬城市') //等同於this.$store.commit('reUpdate','牧馬城市')
},
...mapActions(['saveListName']), reUpdateName(){ let self = this; // self.$store.dispatch('saveListName','靈魂不再無處安放')
self.saveListName('靈魂不再無處安放')
}
}
actions中的異步現象：
store目錄下的index.js
actions: { saveListName({commit},status){ commit('reUpdate',status) }, changeListName(context,status){ setTimeout(()=>{ context.commit('reUpdate',status) },2000) } },
HelloWorld.vue組件中
methods: { reUpdateName(){ this.$store.dispatch('changeListName','夜泊寄宿酒家') } }
modules在項目中的運用？
如果一個項目非常大的話狀態就會非常的多，如果不進行分類處理，所有的狀態都維護在一個state里面的話，狀態管理就會變得非常的混亂，這樣非常不利於項目的后期維護，所以store有了我們的modules：
一個簡單的模塊化目錄：
在store.js中：
import Vue from 'vue' import Vuex from 'vuex' import login from './modules/login' Vue.use(Vuex); export default new Vuex.Store({ modules: { login }, state:{ //右側收縮框狀態 changShow: 0 }, getters:{ isShow(state){ return state.changShow } }, mutations:{ show(state){ state.changShow = 1; } } })
在login.js中：
const state = { userInfo: localStorage.userInfo ? localStorage.userInfo : {} } const mutations = { userInfo(state, _userInfo) { state.userInfo = _userInfo; } } const getters = { getUserInfo(state) { return typeof state.userInfo == "string" ? JSON.parse(state.userInfo) : state.userInfo } } const actions = { saveUserInfo({ commit }, _userInfo) { localStorage.userInfo = JSON.stringify(_userInfo) commit('userInfo', _userInfo); } } export default { state, mutations, actions, getters }