Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
安装
npm install vuex --save
main.js
import store from './store'
new Vue({
router,
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({
state: { // vuex中的数据源
userInfo: (sessionStorage.userInfo) ? JSON.parse(sessionStorage.userInfo) : null,
count: 1, // this.$store.state.count获取
list: [{ id: 1, name: 1 }, { id: 2, name: 2 }, { id: 3, name: 3 }]
},
getters: { // 相当于vue中的computed
getStateCount: state => { // this.$store.getters.getStateCount获取
return state.count + 1
},
getNewList: state => { // this.$store.getters.getNewList获取
return state.list.filter(n => n.id < 3)
}
},
mutations: {
getUserInfo (state, n) { // this.$store.commit('getUserInfo',n)
state.userInfo = n
sessionStorage.userInfo = JSON.stringify(n)
}
},
actions: { // 注册actions,类似vue里的methods
getUserInfoFun (content, n) { // 接受一个与store实例居右相同方法的属性的content对象 this.$store.dispatch('getUserInfoFun',n)
content.commit('getUserInfo', n)
}
}
})
mapState、mapGetters、mapActions
在vue文件中首先引用
import { mapState, mapGetters, mapActions } from "vuex";
然后获取
computed: {
...mapState({
count1: state => state.count
})
},
参考文献
Vuex ：https://vuex.vuejs.org/zh/
5分钟带你入门vuex（vue状态管理）:
https://baijiahao.baidu.com/s?id=1618794879569468435&wfr=spider&for=pc