vuex是一个个专为 Vue.js 应用程序开发的状态管理工具,它采用集中式存储管理应用的所有组件的状态。话不多说,直接上菜。
- state 数据存贮
- getter state的计算属性
- mutation 更改state中状态的逻辑 同步操作
- action 提交mutation 异步操作
- model 模块化
export default new Vuex.Store({
// state相当于组件中的data,专门用来存放全局的数据
state: {},
getters: {},
mutations: {},
actions: {},
modules: {}
})
1.state 存储变量
state 存储的变量是可以全局使用的
const store = new Vuex.Store({
state :{
a: '',
b: []
},
})
使用:
let a = this.$store.state.a
let b = this.$store.state.b
2.mutation
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
定义方法
mutations: {
set_a(state,payload) { //a 是存储state对象的值
state.a = payload //payload 是传递的参数
},
set_b(state,payload) {
state.b = payload
},
}
调用
this.$store.commit('set_a',a)
3.getter
getter属性 和vue的computed属性一样--- 计算属性
getters: {
get_a(state) {
return state.a
}
},
使用: 也是跟computed一样
<div>{
{$store.getters.get_a}}</div>
4.action
actions是store中专门用来处理异步的,实际修改状态值的,还是mutations
actions: {
// setTimeout异步操作
set_aAsync(context){
setTimeout(() => {
context.commit('set_a')
}, 1000);
}
},
调用:
this.$store.dispatch('set_aAsync')
5.model
我们的store可以认为是一个主模块,它下边可以分解为很多子模块,子模块都可以单独领出来写,写完再导入到主模块中。
models :{
a: {
state: {
a:'aaa',
},
getters: {},
mutations: {},
actions: {},
modules: {}
}
}
调用(models中的state)
this.$state.state.a
调用 models中的getter、mutation和actions 的方法和平常一样。
以上就是一个比较健壮的使用 vuex 的过程,包括同步的数据保存,异步的网络请求数据的保存以及对响应结果的处理。当然,这仍然是一个初步的使用。例如,组件中使用 state、getters、mutations、actions 还有其他的方法,不用每次都使用 this.$store
来进行调用。不过,方法的使用并没有什么规定,上面的写法比较方便简洁,大多数人都会采用 this.$store
来进行触发 state、getters、mutations、actions。
但随着项目的增大,vuex 与请求接口的配合,vuex 中数据量增大后的封装与抽离都会是一些比较重要的工程。但 vuex 的方便之处正是对数据的全局管理,分包得太复杂也不见得是好事,具体自然是视情况而定。
描述如有错误,欢迎指正!