Vuex是什么
专为 Vue.js 应用程序开发的 状态管理模式,采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化
store.commit
、store.dispatch
)来改变状态, npm install vuex --save
main.js
:import store from './store'
// 将状态从根组件 '注入' ,让子组件能通过 this.$store 访问
new Vue({
store,
render: h => h(App)
}).$mount('#app')
store.js
:import Vue from 'vue'
import Vuex from 'vuex'
// 作为插件使用
Vue.use(Vuex)
// 定义容器, 并作为模块导出
export default new Vuex.Store({
// 状态:store.state
state: {
token: '',
},
// 计算状态:store.getters
getters: {
loginStatus: state => {
return state.token
},
},
// 更改状态:store.commit()
mutations: {
setToken (state, value) {
state.token = value
localStorage.setItem('TOKEN', value)
}
}
// 更改状态(异步):store.dispatch()
mutations: {
setToken (state, value) {
state.token = value
localStorage.setItem('TOKEN', value)
}
}
})
类似容器,包含应用的大部分状态
<span>{{ store.state.activePage }}span>
// 组件中调用
export default {
created () {
this.store.state.activePage
this.store.commit('activePage', 'home')
}
}
Vuex 使用单一状态树,这可以让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。需要注意,单状态树和模块化并不冲突!
由于 store 中的状态是响应式的,在组件中调用 store 中的状态简单到仅需要在计算属性中返回即可
computed: {
count () {
return store.state.count // this.$store.state.count
}
}
Getter(state, getters)
可以从 store 中的 state 中派生出一些状态(过滤、计数),类似于计算属性
getter
的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
完整请参照 https://vuex.vuejs.org/zh-cn/getters.html\
mutation
必须是同步函数,且需遵守 Vue 的响应规则
store.commit(type, payload)
方法来触发mutations中的相关方法。Vue.set(obj, 'newProp', 123)
state.obj = { ...state.obj, newProp: 123 }
完整请参照: https://vuex.vuejs.org/zh-cn/mutations.html
Action 类似于 mutation,不同在于:
store.dispatch
可以处理被触发的 action 的处理函数返回的 Promise,并且 store.dispatch
仍旧返回 Promise。
actions: {
actionA ({ commit }) {
return new Promise((resolve, reject) => {
setTimeout(() => {
commit('someMutation')
resolve()
}, 1000)
})
}
}
现在你可以:
store.dispatch('actionA').then(() => {
// ...
})
在另外一个 action 中也可以:
// 假设 getData() 和 getOtherData() 返回的是 Promise
actions: {
async actionA ({ commit }) {
commit('gotData', await getData())
},
async actionB ({ dispatch, commit }) {
await dispatch('actionA') // 等待 actionA 完成
commit('gotOtherData', await getOtherData())
}
}
完整请参照:https://vuex.vuejs.org/zh-cn/actions.html
mapState
辅助函数帮助我们生成计算属性。// 使用 ES6 的解构赋值导入
import { mapState } from 'vuex'
export default {
created () {
console.log(this.activePage)
this.setActivePage('home')
},
computed: {
...mapState({
// 使用对象展开运算符将此对象混入到外部对象中
})
}
computed: mapState(
// 映射 this.token 为 store.state.token
'token',
// 映射多个状态
['token', 'count'],
// 箭头函数可使代码更简练
token: state => state.token,
// 传字符串参数 'token' 等同于 `state => state.token`
tokenAlias: 'token',
// 为了能够使用 `this` 获取局部状态,必须使用常规函数
tokenPlus (state) {
return `Bearer ${state.token}`
}
)
}
参考博客
https://blog.csdn.net/ligang2585116/article/details/78964349