一、认识vuex
1.什么是vuex?
我们使用一条数据去管理一个视图,那么这个数据我们就称之为 ‘状态’
2.vuex是做什么的?
Vuex是一个集中式的存储管理中心,vuex中可以用来存储 数据( 状态 )
vuex也是一个状态管理中心,它也可以进行状态的管理
3.什么是状态管理模式?
我们使用一条数据去管理一个视图,那么这种管理模式就称之为 状态管理
4.什么时候使用vuex?
一般都使用在中大型应用使用
二、vuex中的五大对象
export default{
state: {//存数据 },
getters: {//计算属性 },
mutations: {//同步的方法 },
actions: {//异步的方法 },
modules: {//分模块}
}
1.state 存储据
vuex的基本数据,用来存储变量
state是放置所有公共状态的属性,如果你有一个公共状态 , 你只需要定义在 state对象中
state: {//存数据
n: 1,
list: []
},
2.getters 计算属性
从基本数据(state)派生的数据,相当于state的计算属性,具有返回值的方法:
除了state之外,有时我们还需要从state中派生出一些状态,这些状态是依赖state的,此时会用到getters(可以使用 getters 来获取 state 中的数据)自己总结:相当于是 state 的计算属性
getters: {//计算属性
//判断仓库中的n的值是否大于10
ifNum(state) {
console.log(state);
if (state.n > 0) {
return state.n = "大于5"
}else{
return state.n = "不大于5"
}
}
},
//在组建中如何使用
computed: {
ifNum(){
return this.$store.getters.ifNum//获取getters对象中ifNum的计算属性
}
},
3.mutations 同步方法
提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)
mutations: {//同步的方法
//修改n的值为5
numModfiy(state,payload){//state 仓库的state对象 payload参数
state.n=payload //payload组件中所传递的参数
}
},
//在组件中如何使用
methods: {
numModfiy() {
//调用仓库里的 mutations对象里的方法
this.$store.commit("numModfiy", 10);
},
},
4.actions 异步方法
和mutation的功能大致相同,不同之处在于
1. Action 提交的是 mutation,而不是直接变更状态。
2. Action 可以包含任意异步操作。
actions则负责进行异步操作,处理的结果交给 muations
mutations: {//同步的方法
//修改n的值为15
numModfiy(state,payload){//state 仓库的state对象 payload参数
state.n=payload //payload组件中所传递的参数
}
},
actions: {
//使用异步的方式修改n的值为15
asyncNumModfiy(ctx, payload){
setTimeout(() => {
ctx.commit("numModfiy", payload)//在调取同步的放到进行n的修改
}, 2000)
}
},
//在组件中如何使用
asyncNumModfiy() {
//调用仓库里的 actions对象里的方法
this.$store.dispatch("asyncNumModfiy", 15);
},
5.modules 模块化
模块化vuex,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。
//主仓库
import Vue from 'vue'
import Vuex from 'vuex'
import counter from './counter'
import list from './list'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
counter,list
}
})
//分仓库 store/counter/index.js
export default {
namespaced: true,//开启命名空间,防止不同模块getters,mutations,actions重名问题
state: {//存数据},
getters: {//计算属性},
mutations: {//同步的方法},
actions: {//异步的方法 },
}
//分仓库 store/ list /index.js
export default {
namespaced: true,//开启命名空间,防止不同模块getters,mutations,actions重名问题
state: {//存数据},
getters: {//计算属性},
mutations: {//同步的方法},
actions: {//异步的方法 },
}
分仓库如何在组件中使用呢???
//调取仓库中的方法是 方法前需要写入分仓库的路径
//例如异步方法在组件中的使场景如下 (actions 异步方法)
//在组建中如何使用
asyncNumModfiy() {//部分代码,只显示关键部分
//调用仓库里的 actions对象里的方法
this.$store.dispatch("list/asyncNumModfiy", 15);
},
//在方法中要挂载分仓库的路径
-------------------------------------------------
//调用分仓库的方法
{
{ $store.state.counter.n }}