時(shí)間：2023-04-21 02:27:01 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-04-21 02:27:01 來源：網(wǎng)站運(yùn)營
Vuex4.0的基本使用方法：
在線咨詢
state: { count: 0, myObject: { time: '現(xiàn)在的時(shí)間' } }一個(gè)簡單類型（number）的count，還有一個(gè)引用類型的myObject。 const store = useStore() // 看看state的類型 console.log('state：', store.state) console.log('state.count：', store.state.count) console.log('state.myObject：', store.state.myObject) state: { count: 0, myObject: { time: '現(xiàn)在的時(shí)間：' }, myArray: [1,2,2,3,4] },簡單類型、對(duì)象和數(shù)組，比較有代表性的類型。 // 整體獲取 const allStateManage = () => { const store = Vuex.useStore() // 看看state的類型 console.log('state：', store.state) console.log('state.count：', store.state.count) console.log('state.myObject：', store.state.myObject) return { allState } }整個(gè)state就是reactive的，成員又是什么樣子的呢？import { useStore } from 'vuex'setup() { const store = useStore()}這樣獲取store，然后就可以按照“$store”的習(xí)慣來操作了。 // 整體獲取 const allStateManage = () => { const store = Vuex.useStore() // 獲得整體的state const allState = store.state console.log('allState：', allState) console.log('================') // 定時(shí)修改 count 看響應(yīng)性 setTimeout(() => { // store.commit('setCount') // allState.count += 101 // 會(huì)直接改vuex的state }, 1000) return { allState } } // 直接獲取成員 const stateMemberManage = () => { const store = Vuex.useStore() // 看看state的類型 let memberCount = store.state.count // 失去響應(yīng)性 const memberObject = store.state.myObject console.log('memberCount', memberCount) console.log('memberObject', memberObject) console.log('================') // 定時(shí)修改 count 看響應(yīng)性 setTimeout(() => { memberCount += 101 // const 定義的會(huì)報(bào)錯(cuò)，不允許賦值，常量。 // let 定義的可以修改，但是沒有相應(yīng)性 }, 1000) return { memberCount, memberObject } }// 間接獲取 const indirectManage = () => { const store = Vuex.useStore() // 用toRef獲取 count，有相應(yīng)性，可以直接修改state const refCount = Vue.toRef(store.state, 'count') // 計(jì)算屬性獲取count，有相應(yīng)性，不可以直接修改state const comCount = Vue.computed(() => store.state.count) // 只讀的對(duì)象，有相應(yīng)性，淺層不可以修改，但是深層還是可以修改。 const readonlyObject = Vue.readonly(store.state.myObject) console.log('refCount：', refCount) console.log('comCount：', comCount) console.log('readonlyObject：', readonlyObject) console.log('================') // 定時(shí)修改 count 看響應(yīng)性 setTimeout(() => { // store.commit('setCount') // refCount.value += 200 // 會(huì)直接改vuex的state }, 2000) return { refCount, comCount, readonlyObject } }因?yàn)橐妙愋蜁?huì)自動(dòng)變成reactive的形式，而reactive又可以直接修改state，那么就有可能誤操作，導(dǎo)致修改state的情況，那么如何預(yù)防呢？可以使用vue提供的readonly。 // 處理后返回 const operationManage = () => { const store = Vuex.useStore() // 計(jì)算屬性獲取count const addCount = '' // Vue.computed(() => store.state.count++) const getAddCount = store.getters.getAddCount const comGetAddCount = Vue.computed(() => store.getters.getAddCount) const filterArray = store.getters.filterArray(2) const comFilterArray = Vue.computed(() => store.getters.filterArray(2)) console.log('addCount ：', addCount) console.log('getAddCount ：', getAddCount) console.log('comGetAddCount ：', comGetAddCount) console.log('filterArray ：', filterArray) console.log('================') return { addCount, getAddCount, comGetAddCount, filterArray, comFilterArray } }const map = () => { const store = Vuex.useStore() /** * 獲取count， * 用computed實(shí)現(xiàn)相應(yīng) */ const getCount = () => { return Vue.computed(() => store.state.count) } /** * 獲取count， ** 用 ref 實(shí)現(xiàn)相應(yīng) */ const getRefCount = () => { return Vue.ref(store.state.count) } /** * 獲取對(duì)象 */ const getObject = () => { return store.state.myObject } /** * 獲取只讀對(duì)象 */ const getReadonlyObject = () => { return Vue.readonly(store.state.myObject) } /** * 獲取數(shù)組 */ const getArray = () => { return store.state.myArray } /** * 獲取只讀數(shù)組 */ const getReadonlyArray = () => { return Vue.readonly(store.state.myArray) } /** * 查詢數(shù)組 ** id：要查詢的數(shù)據(jù) */ const filterArray = (id) => { return Vue.computed(() => store.getters.filterArray(id)) } return { getCount, getRefCount, getObject, getReadonlyObject, getArray, getReadonlyArray, filterArray }}export default map這樣就可以把麻煩事交給抽離處理的js來處理了，組件只需要調(diào)用就好，不用管其他的。 setup() { // 傳說中的setup const store = Vuex.useStore() // 狀態(tài)的控制事件 const setCount = () =>{ store.commit('setCount') store.commit('setTime') store.commit('setArray') store._mutations.setCount[0] // 這是什么？ } // 獲取state const { allState } = allStateManage() // 直接獲取成員 const { memberCount, memberObject } = stateMemberManage() // 間接獲取成員 const { refCount, comCount, readonlyObject } = indirectManage() // 間接獲取成員 const { addCount, getAddCount, comGetAddCount, filterArray, comFilterArray } = operationManage() // 通過map 獲取 count // 可以使用別名 const { getCount: mapGetCount } = map() const mapCount = mapGetCount() return { // 返回給模板，否則模板訪問不到。 // 直接獲取state allState, // 直接獲取成員 memberCount,memberObject, // 間接獲取 refCount, comCount,readonlyObject, // 操作后獲取 addCount,getAddCount,comGetAddCount,filterArray,comFilterArray, // map mapCount, // 設(shè)置state setCount } }具體實(shí)現(xiàn)方式寫成各種函數(shù)，可以放在單獨(dú)的js文件里面。 mutations: { // 計(jì)數(shù)器 setCount(state, num = 1) { state.count += num }, // 設(shè)置當(dāng)前時(shí)間 setTime(state) { state.myObject.time = '現(xiàn)在時(shí)間：' + new Date() }, // 設(shè)置數(shù)組的值 setArray(state) { state.myArray[1] = 4 } },store.commit('setCount', val)我們還是看看內(nèi)部結(jié)構(gòu)：Vuex 中的 mutation 非常類似于事件：每個(gè) mutation 都有一個(gè)字符串的 事件類型 (type) 和 一個(gè) 回調(diào)函數(shù) (handler)。這個(gè)回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方，并且它會(huì)接受 state 作為第一個(gè)參數(shù)：官方這么說的，我水平有限，大概涉及到了原型鏈那方面的了。
// mutation-types.jsexport const Set_Count = 'set_count'然后引入這個(gè)文件，并且定義事件import { Set_Count, Set_Count_sy } from './mutation-types.js' mutations: { // 計(jì)數(shù)器 setCount(state, num = 1) { state.count += num }, [Set_Count](state, num = 1) { state.count += num },調(diào)用// 需要先引入 mutation-types.jsstore.commit(Set_Count_sy)這樣你就可以，，，等等，我要是故意寫錯(cuò)會(huì)給出提示嗎？ actions: { // 異步獲取數(shù)組 getArray(context) { console.log('================================') console.log('異步getArray——context', context) setTimeout(() => { context.commit('setArray', new Date().valueOf()) }, 1000) }, // 異步獲取數(shù)組 getArrayPromise(context) { return new Promise((resolve, reject) => { console.log('================================') console.log('異步 getArrayPromise ——context', context) setTimeout(() => { const time = new Date().valueOf() context.commit('setArray', time) resolve(time) }, 2000) }) }看看參數(shù) // 異步操作 const actionManame = () => { const store = Vuex.useStore() const getArray = store.dispatch('getArray') console.log('外部調(diào)用 getArray', getArray) getArray.then((data) => { console.log('===========') console.log('getArray 異步操作完成，返回?cái)?shù)據(jù)：', data) console.log('===========') }) const getArrayPromise = store.dispatch('getArrayPromise') console.log('外部調(diào)用 getArrayPromise', getArrayPromise) getArrayPromise.then((data) => { console.log('===========') console.log('getArrayPromise 異步操作完成，返回?cái)?shù)據(jù)：', data) console.log('===========') }) return { getArray, getArrayPromise } } 如果不需要知道確定的完成時(shí)間的話，可以直接調(diào)用 store.dispatch('getArray') 如果要知道的話，可以寫個(gè)then store.dispatch('getArrayPromise').then((data) => { console.log('異步操作完成，返回?cái)?shù)據(jù)：', data) })這個(gè)用法和axios非常相似。雖然我們沒有返回 promise實(shí)例的時(shí)候，外部也可以用then，但是這個(gè)是默認(rèn)的，并不是我們真正執(zhí)行操作后返回的。我測(cè)試了一下，里面的 setTimeout 改成十秒，結(jié)果外面的then先執(zhí)行了，十秒后內(nèi)部操作完畢，外面沒有任何反應(yīng)。
// axios，返回自己 的 new promise getData(context) { return new Promise((resolve, reject) => { axios.get('demo.json') .then((response) => { const arr = response.data.company.formItem console.log('getData - axios - response', response) // context.commit('reloadArray', response.data.company.formItem) resolve(arr) }) .catch((error) => { console.log('getData - axios - error', error) }) }) }, // axios 返回 axios的promise getData(context) { const ajax = axios.get('demo.json') ajax.then((response) => { const arr = response.data.company.formItem console.log('getData - axios - response', response) // context.commit('reloadArray', response.data.company.formItem) }) .catch((error) => { console.log('getData - axios - error', error) }) return ajax // 直接返回 axios 的promise的實(shí)例 }調(diào)用方式 store.dispatch('getData').then((data) => { console.log('===========') console.log('getData 異步操作完成，返回?cái)?shù)據(jù)：', data) console.log('===========') })這樣內(nèi)部和外部都可以得到axios返回的數(shù)據(jù)。const user = { // namespaced: true, // 避免重名 state: () => ({ userInfo: { userId: 123, userCode: '', userNick: '' }, userRole: [] }), mutations: { setUser(state, code) { state.userInfo.userCode = code } }, getters: { getUser(state) { return state.userInfo } }, actions: { // { state, commit, rootState } setUsera (store, code) { store.commit('setUser', code) } }}export default userconst userInfo = store.state.user.userInfoconst userInfo2 = store.getters.getUserstore.commit('setUser', '要修改的數(shù)據(jù)')store.dispatch('setUsera', '要修改的數(shù)據(jù)')export default Vuex.createStore({ state: { count: 0, myObject: { time: '現(xiàn)在的時(shí)間：' }, myArray: [1,2,2,3,4] }, getters: {}, mutations: {}, actions: {}, modules: { // 注意：這個(gè)myObject會(huì)覆蓋掉根的myObject。 // 設(shè)置命名空間也沒有用，還是會(huì)覆蓋。 // 所以要避免重名。 myObject: user, user: user, person: user }})store.commit('user/setUser', 'user的code')store.commit('myObject/setUser', 'myObject的code')store.commit('person/setUser', 'person的code')可以分別給每個(gè)模塊的state設(shè)置內(nèi)容，那么其實(shí)就是一個(gè)模塊。 store.dispatch('user/setUsera', 'action的user的code')store.getters['user/getUser']因?yàn)橛行本€，所以需要用字符串的方式來訪問。關(guān)鍵詞：使用,方法,基本
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
