VUEX
全局状态管理模式 数据的集中管理
src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// store 仓库
export default new Vuex.Store({
// state 就是容器 数据保存的位置
state: {
user: '' // 变量名 储存用
},
// mutations 是方法的集合 修改数据的唯一方式 必须是同步的
mutations: {
// setUser 函数名 可自定义
setUser (state, user) {//第一个是固定写法 第二个形参
state.user = user // 容器里的变量 形参通过调用传入
}
},
// 处理异步操作的地方
actions: {
// 函数 自定义
login(context,payload){//第一个是固定写法 第二个形参
}
},
// 模块 可以将容器里的变量模块单独封装 引入到这里
modules: {
},
getters
})
main.js
import store from './store/index.js'
const app = new Vue({
...App,
store
})
在其他组件的调用方法 将数据存到容器里
// 触发mutations里的函数
this.$store.commit('自定义函数名', 实参)
// 触发actions 里的函数
this.$store.dispatch('自定义函数名',实参)
获取vuex容器里的值
import { mapState } from 'vuex';
computed: {
...mapState(['user'])
// 相当于把vuex里的user变量放到当前页面的data()里 是一个对象
// 相当于全局变量 在事件函数里用this.user可以读取
},
mounted() { // 生命周期函数自执行 打印测试一下
console.log(this.user); // 用this.可以读取
}
模块单独封装
举例 user.js
export default {
// 模块具备单独的命名空间
namespaced: true,
// state 就是容器 数据保存的位置
state: {
user:{} // 变量
},
// mutations 修改数据的唯一方式 必须是同步的
mutations: {
setUser (state, user) {//第一个是固定 第二个形参
state.user = user // 容器里的变量 形参通过调用传入
}
},
// 处理异步操作的地方
actions: {
login(context,payload){//第一个是固定写法 第二个形参
context.commit('setUser',实参) // 可以调用mutations 里的方法 将数据传过去
}
}
}
index 中
import Vue from 'vue'
import Vuex from 'vuex'
// 引入 user模块
import user from './modules/user'
// 引入getters
import getters from './getters'
// 可以在getters里写映射 方便读取vuex里的数据
Vue.use(Vuex)
const store = new Vuex.Store({
// 模块
modules: {
user // user模块
},
getters // 使用getters
})
export default store
index同级 getters.js
const getters = {
// 将user模块中的token变量映射出去
token: state => state.user.token,
// 将user模块中的用户信息变量对象中的名字属性映射出去
name: state => state.user.userinfo.username,
// 将user模块中的用户信息对象中的头像属性映射出去
staffPhoto: state => state.user.userinfo.staffPhoto,
// 可以在外面利用 getters里映射出去的名字快速获取
}
export default getters
在其他组件内调用模块里的方法
// 触发user模块里 mutations 里的函数
this.$store.commit('user/setUser', 实参)
// 触发user模块里 actions 里的函数
this.$store.dispatch('user/login',实参)
获取vuex容器里的值 普通写法
this.$store.state.user模块.user变量
利用getters 获取 vuex容器里的值
this.$store.getters.在getters里映射的名字
import { mapGetters } from 'vuex' // 引入
computed: { // 计算属性里
...mapGetters([ // 对应getters里映射出的名字
'sidebar',
'staffPhoto',
'name'
])
},
// 相当于放到了全局变量里 {{ name }} 就可使用
v3使用VUEX
vuex
import { createStore } from 'vuex'
export default createStore({
// state 就是容器 数据保存的位置
state: {
},
// mutations 是方法的集合 修改数据的唯一方式 必须是同步的
mutations: {
},
// 处理异步操作的地方
actions: {
},
// 模块 可以将容器里的变量模块单独封装 引入到这里
modules: {
}
})
页面里
import { useStore } from 'vuex'
const store = useStore()
// 读取数据
const list = computed(() => {
return store.state.数据名
})
// 调用方法
store.commit('方法名')
store.dispatch('方法名')