vuex
vuex概念不必多说,就是vue官方提供的一个全局状态管理的工具,简而言之就是用来存储数据的东西,效果类似于localStorage和sessionStorage。
1 vuex的引入(vuex安装:npm install --save vuex)
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
在main.js中引入vuex
import store from './store/store.js'; //调用this.$store
new Vue({
el: '#app',
router,
store: store,
components: { App },
template: '<App/>'
})
2 vuex 5大核心简单介绍
state:存储数据。
getters:定义获取state数据的方法。
mutations:操作state数据的方法(同步操作)。
actions: actions提交的是mutation,进行异步操作(通俗的说就是来实现mutation异步的方法)。
modules:模块化,每个模块拥有自己的state、gettters、mutations和actions,其用途是避免全局状态太多,变得太臃肿。
3 简单的vuex应用--官网示例
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state:{
count:10
},
getters:{
//调用方法:store.getters.getcount
getcount(state){
return state.count
}
},
mutations:{
//使用store.commit('increment')来触发该函数(同步
increment(state){
state.count+=1
}
},
actions:{
//分发actions的方法:store.dispatch('increment')
increment(context){ //context:与 store 实例具有相同方法和属性的 context 对象
// context.commit('increment') //这行代码是调用mutations里的方法,和mutations不同的是action里可以写异步代码
setInterval(()=>{
context.commit('increment')
},1000)
}
}
})
export default store
这只是vuex的简单应用,其他的如getters、mutations和actions还有第二参数,module模块化等更多知识可以去官网学习。