一.vuex簡介
VueX是適用于在Vue項(xiàng)目開發(fā)時(shí)使用的狀態(tài)管理工具。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。
二.開發(fā)中遇到的問題
項(xiàng)目中組件傳參的方式 潮太，來同步data的值，確實(shí)很方便。如果業(yè)務(wù)變得的越來越復(fù)雜铡买，項(xiàng)目會(huì)逐漸變大更鲁，組件的管理和代碼的維護(hù) 工作量 的問題，變得很頭疼奇钞。面對(duì)此問題岁经，Vuex 的使用會(huì)將此問題變的越來越輕松。
三.vuex的原理圖
四.安裝
1.安裝vuex
npm install vuex --save
2.使用
- 在項(xiàng)目根目錄下的src文件夾中新建store文件夾蛇券，同時(shí)新建index.js文件，編寫index.js文件如下
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({})
export default store;
- 在src文件夾中的main.js文件中進(jìn)行修改如下（引入store下的index.js文件樊拓，并且將store綁定到全局）
import animate from 'animate.css'
import Vue from 'vue'
import App from './App.vue'
import store from "./store/index"
Vue.config.productionTip = false
Vue.prototype.bus = new Vue();
new Vue({
store,
render: h => h(App),
}).$mount('#app')
Vue.use(animate);
五.Vuex中有五種基本對(duì)象
-
1.state 存儲(chǔ)數(shù)據(jù)
存儲(chǔ)數(shù)據(jù)和組件的data類似纠亚，只不過data是用來存放組件的私有數(shù)據(jù)，state用來存放組件之間共享的數(shù)據(jù).
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = { // 設(shè)置全局訪問的state對(duì)象筋夏，記得設(shè)置初始值
tableHead: [],
tableList: [],
}
計(jì)算屬性會(huì)監(jiān)控?cái)?shù)據(jù)變化蒂胞，一旦發(fā)生改變就會(huì)響應(yīng)，所以我們會(huì)在組件的computed中獲取state的數(shù)據(jù)
computed： {
tableHead() {
return this.$store.state.tableHead
}
}
-
2.mapstate輔助函數(shù)
一個(gè)組件需要獲取多種狀態(tài)時(shí)条篷，將這些狀態(tài)都聲明會(huì)顯得很重復(fù)骗随，這時(shí)候安利大家使用mapstate輔助函數(shù)生成計(jì)算屬性,記得import { mapState } from "vuex"
computed: {
...mapState({
tableHead: state => state.demo.tableHead,
tableList: state => state.demo.tableList
}),
}
-
3.getters
當(dāng)我們需要對(duì)state的數(shù)據(jù)進(jìn)行篩選時(shí)可以用到它，可以理解為state的計(jì)算屬性赴叹。一般不常用
-
4.mutations 更改狀態(tài)鸿染，mutation必須是同步函數(shù)
在Vuex中，改變狀態(tài)(state) 的唯一方式是通過提交(commit) 一個(gè)mutation乞巧。mutations下的函數(shù)接收state作為第一個(gè)參數(shù)涨椒，接收payload（載荷）作為第二個(gè)參數(shù)，載荷是用來記錄開發(fā)者提交了什么绽媒。
mutations: {
updateTableHead( state, obj ) { // 自定義改變state初始值的方法蚕冬，可以傳第二個(gè)參數(shù)（變量或?qū)ο螅? state.tableHead = obj;
},
updateTableList( state, obj ) {
state.tableList = obj
},
}
你可以在組件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 輔助函數(shù)將組件中的 methods 映射為 store.commit 調(diào)用
import { mapMutations } from 'vuex'
export default {
methods: {
...mapMutations([
'XXX'
])
}
}
-
5.actions 異步操作
Actions 提交的是 mutations是辕，而不是直接變更狀態(tài)囤热。也就是說，actions會(huì)讓mutations幫他提交數(shù)據(jù)的變更
getTableHeadList({commit}) {
return demo.getTableHead(). then( res => // 調(diào)用了接口
commit('updateTableHead',res.data.Model.headList))//{commit}運(yùn)用了參數(shù)解構(gòu)來簡化代碼
}
分發(fā)Action是通過store.dispatch觸發(fā)的
store.dispatch('tableHead')
mutations和actions區(qū)別:
mutations：同步
mutations: {
increment ( state, n ) {
state.count += n
}
}
store.commit( 'increment',10)
actions：異步
actions: {
updateCount ( store, data ) {
setTimeout(() => {
store.commit( 'updateCount', data.num )
}, data.time)
}
}
this.$store.dispatch( 'updataCount', {
num: 5,
time: 2000
})
moudles：由于使用單一狀態(tài)樹获三，應(yīng)用的所有狀態(tài)會(huì)集中到一起旁蔼。當(dāng)應(yīng)用變得非常復(fù)雜時(shí)，store 的代碼就有可能變得非常臃腫石窑。為了解決以上問題牌芋，我們可以將 store 分割成模塊（module）。每個(gè)模塊擁有自己的 state松逊、mutation躺屁、action、getter经宏、甚至是嵌套子模塊——從上至下進(jìn)行同樣方式的分割
參考資料->點(diǎn)擊跳轉(zhuǎn)
我是喬喬犀暑，關(guān)注我 一起學(xué)前端
