vuex 使用详解
vuex的安装，初始化store，获取store中的数据，更新store中的数据，异步更新store中的数据，getters属性
1.下载安装 vuex
npm install vuex --save
2.创建并初始化 store
新建 store 文件夹
在 store 文件夹下，新建 index.js
/store/index.js
import Vue from "vue";
import Vuex from 'vuex'; // 引入vuex
Vue.use(Vuex) // 使用vuex
const store=new Vuex.Store({ // 初始化数据仓库store
state:{
name:'张三',
number:0,
list:[
{id:1,name:'111'},
{id:2,name:'222'},
{id:3,name:'333'},
]
} })
export default store; // 默认导出数据仓库store
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import 'lib-flexible/flexible'
import store from './store' // 引入数据仓库
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
store, // 将数据仓库store对象添加在vue实例上，可以在外部使用this.$store.state.xxx 访问数据仓库中的数据
components: { App },
template: '<App/>',
})
3.读取 store 数据
使用 this.$store.state.name 读取
/pages/home.vue
mounted() {
console.log(this.$store);
console.log(this.$store.state);
console.log(this.$store.state.name); // 访问store中的数据
},
console.log(this.$store);
console.log(this.$store.state);
console.log(this.$store.state.name);
利用 计算属性 computed 读取 store 数据 3
优雅的获取仓库数据，使用计算属性获取
// 优雅的获取仓库数据
mounted() {
console.log(this.getName); // 访问计算属性中的store数据
},
computed:{
getName(){
return this.$store.state.name; // 获取store中的数据
}
}
利用 vuex 的 mapState 方法获取 store 数据
使用 mapState 方法获取 store 中的数据
import { mapState } from "vuex";
mounted() {
console.log(this.name);
},
computed: {
...mapState(["name"]), // 解构赋值，将store数据加入计算属性中
},
...mapState(["name"]),
等价于
name(){
return this.$store.state.name;
}
给取到的数据取名为 getName
...mapState({ getName: "name" }),
等价于
getName(){
return this.$store.state.name;
}
4.修饰器 getter，处理 store 数据
getter 定义
为了方便统一处理 store 中的数据，使用 getter 属性，在源头一次性处理取到的数据
const store = new Vuex.Store({
// 初始化数据仓库
state: {
name: '张三',
number: 0,
list: [
{ id: 1, name: '111' },
{ id: 2, name: '222' },
{ id: 3, name: '333' },
],
},
getters: {
// getters属性中的方法 返回就是后的store数据
getMessage(state) {
return `hello ${state.name}`
},
},
})
获取 getter 修饰后的 store 数据
this.$store.getters.xxx 修饰数据
console.log(this.$store.getters.getMessage); // hello 张三
使用mapGetters获取修饰后的store数据
import { mapGetters, mapState } from "vuex";
mounted() {
console.log(this.getMessage);
},
computed: {
...mapGetters(["getMessage"]),
},
给取到的数据取名为getName
import { mapGetters, mapState } from "vuex";
mounted() {
console.log(this.getName);
},
computed: {
...mapGetters({getName:'getMessage'}),
},
修改 store 数据
vuex 中使用 mutation 修改 store 数据
const store = new Vuex.Store({
// 初始化数据仓库
state: {
//state属性定义数据，this.$store.state.name / ...mapState()获取数据
name: '张三',
number: 0,
list: [
{ id: 1, name: '111' },
{ id: 2, name: '222' },
{ id: 3, name: '333' },
],
},
getters: {
//getters属性修饰数据，this.$store.getters.getMessage / ...mapgetMessage()获取修饰后的数据
getMessage(state) {
return `hello ${state.name}`
},
},
mutations: {
//mutations属性修改数据，组件中this.$store.commit('setNumber') 触发setNumber方法修改数据
setNumber(state, number) {
state.number = number
},
},
})
触发 mutation 中的 setNumber 方法，改变 store 中的 number
this.$store.commit('setNumber', 9)
this.$store.commit触发改变
官方建议 mutation 中的方法，第二个参数在传递实参时，最好传递一个对象进去，且形参命名为 payload
mutations:{ //mutations属性修改数据，组件中this.$store.commit('setNumber') 触发setNumber方法修改数据
setNumber(state){ // 不传递参数
state.number++;
},
setNumber1(state,number){ // 参数为基本数据类型
state.number=number;
},
setNumber2(state,payload){ // 推荐：参数为对象
state.number=payload.number;
}
}
触发 mutation 改变数据
this.$store.commit('setNumber')
this.$store.commit('setNumber1', 9)
this.$store.commit('setNumber2', { number: 6 })
mapMutations 函数 映射 mutation 方法
mapMutations 函数,将 store 中的 mutation 函数 映射为当前组件的 methods 方法，调用方法触发改变
定义改变共享数据的的 mutation 函数
mutations:{ //mutations属性修改数据，组件中this.$store.commit('setNumber') 触发setNumber方法修改数据
setNumber1(state,payload){ // 传递一个对象作为参数
return state.number=payload.number;
},
setNumber2(state){ // state是默认参数，在调用是不需要传递
return state.number++;
}
}
将 mutation 函数映射到组建的 methods 中
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
methods: {
...mapMutations(["setNumber2", "setNumber1"]),
}
调用方法，改变共享数据
this.setNumber2() // 不传参
this.setNumber1({ number: 6 }) // 传参
异步更新 store 数据
action 用于处理异步任务
想要异步更改共享数据，直接在异步回调中触发 mutation 是不奏效的
需要借助 action 函数
1，通过 dispatch 触发 action 函数中的异步任务
2，异步任务的成功回调 中书写 this.$store.commit 触发 mutation 函数
3，action 函数中的异步任务完成后，通过 commit 触发 mutation 函数 实现共享数据更改
dispatch 触发 action 函数中的异步任务
定义 mutations 和 actions
mutations:{ //mutations属性修改数据，组件中this.$store.commit('setNumber') 触发setNumber方法修改数据
setNumber(state,number){
return state.number=number;
},
setNumber1(state,payload){
return state.number=payload.number;
},
setNumber2(state){
return state.number++;
}
},
actions:{
doasync(context){
setTimeout(()=>{
context.commit('setNumber2') // 异步触发 共享数据更改
},2000)
}
}
dispatch 触发异步任务
this.$store.dispatch('doasync')
dispatch 触发异步任务，传递参数
mutations:{ //mutations属性修改数据，组件中this.$store.commit('setNumber') 触发setNumber方法修改数据
setNumber(state,number){
return state.number=number;
},
setNumber1(state,payload){
return state.number=payload.number;
},
setNumber2(state){
return state.number++;
}
},
actions:{
doasync(context){
setTimeout(()=>{
context.commit('setNumber2')
},2000)
},
doasync1(context,step){
setTimeout(()=>{
context.commit('setNumber1',step)
},2000)
}
}
this.$store.dispatch("doasync1", { number: 6 })
mapActions 函数映射 action 方法
mapActions 函数，将 action 函数映射到组件的 methods 中，直接调用 action 函数，触发
mutations:{ //mutations属性修改数据，组件中this.$store.commit('setNumber') 触发setNumber方法修改数据
setNumber2(state){
return state.number++;
}
},
actions:{
doasync(context){
setTimeout(()=>{
context.commit('setNumber2')
},2000)
}
}
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
methods: {
...mapActions(["doasync"]),
handle() {
console.log("更新数据");
console.log("旧值" + this.$store.state.number); // 0
this.doasync();
setTimeout(() => {
console.log("新值" + this.$store.state.number); // 1
}, 3000);
},
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现