基本结构
state
全局状态的初始值,存储所有数据,可以用modules属性划分成若干模块
getters
根据state中的值计算新的值
mutations
所有对state的修改操作都需要定义在这里,不支持异步,可以通过store.commit()触发,也是更新状态的唯一方法-更新state的唯一方法,commmit mutations
actions
定义对state的复杂修改操作,支持异步,可以通过store.dispatch()触发。注意不能直接修改state,只能通过mutations修改state。可以异步操作,可以返回promise,更改数据还是传递到mutation去更改。
modules
定义state的子模块
context 作用
在Vuex中,context是一个对象,它包含了当前store中的state、getters、mutations和actions,并且在actions中是第一个参数。context的作用是为了在actions中能够调用mutations和getters,同时还能够访问全局state。
具体来说,context对象有以下属性和方法:
- state:当前store中的state
- getters:当前store中的getters
- commit:用来提交mutations,例如:context.commit('mutationName')
- dispatch:用来分发actions,例如:context.dispatch('actionName')
- rootState:根store的state
- rootGetters:根store的getters
通过context对象,我们可以在actions中调用mutations和getters,并且可以在全局访问state。这样可以让我们更加方便地管理数据流,使得代码更加简洁和可维护。
ps:相当于有些语言的this,self等。
vue3中简单使用
import { useStore } from 'vuex'
export default {
name: 'Login',
setup() {
const store = useStore();
const count = store.state.number.count;
const data = reactive({
loginData: {
userName: "",
passWard: "",
passWard2: "",
},
num: count,
})
const login = () => {
// 触发store里mutation的函数
store.commit('setCount', 100);
// dispatch 触发store里mutation的函数
store.dispatch('setCountPromise', store.state.number.count).then(res => {
alert('修改成功');
}).catch(err => {
alert(err)
})
// alert(store.state.count)
console.log(store.state.number.count);
}
return {
...toRefs(data),
login
}
}
}
index.js
import { createStore } from 'vuex'
import number from '../store/state/num.js'
export default createStore({
// 数据比较多,分模块
modules: {
number
}
})
num.js
export default {
namespace: true,
// 全局状态的初始值
state: {
count: 1,
},
// 计算state,获取对应的值
getters: {
},
// 更新状态的唯一方法-更新state的唯一方法,commmit mutations
mutations: {
setCount(state, num) {
state.count += num;
}
},
// 可以异步操作,可以返回promise,更改数据还是传递到mutation去更改
actions: {
setCountPromise(context, num) {
// context指mutations环境 ,可用this
return new Promise((resolve, reject) => {
if (num > 100) {
reject('值不能大于100')
}
else {
context.commit('setCount', num);
resolve()
}
})
}
},
}