简洁的vuex 工作流成

最新推荐文章于 2024-05-22 01:00:00 发布

小四是个处女座

最新推荐文章于 2024-05-22 01:00:00 发布

阅读量211

点赞数 1

分类专栏：前端 vue web 文章标签：前端 vue.js

本文链接：https://blog.csdn.net/xiaosi1413/article/details/117228511

版权

前端同时被 3 个专栏收录

72 篇文章 6 订阅

订阅专栏

vue

64 篇文章 1 订阅

订阅专栏

web

17 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue.js应用中使用Vuex进行状态管理。通过在main.js中导入并初始化Vuex store，定义state中的数据结构，以及mutations来同步更新state。在组件中，通过commit方法触发mutations来保存数据，而通过$store.state访问存储的值。同时展示了如何在actions中调用mutations实现异步操作。

摘要由CSDN通过智能技术生成

定义一个js文件在main.js 里引入

import store from './store/index';

store.js

import Vue from "vue"
import Vuex from "vuex"
 
Vue.use(Vuex);

export default new Vuex.Store({

 state:{
    设定自己需要存储的变量
    list:{
         name:'' ",
         aex:" " ,
         max:'“ ”，
      },
      num:'',
      goots:[]
      
      
},
 mutations: {
  setPrint(state, all) { //设置参数
    state.list= all;
  },
   savePath(state,pathName){
       state.goots= pathName;
    }
}
})

在wue页面

       
methods:{
    click(){
        //存储数据
        this.$store.commit('savePath',this.db)
     }
     
 }
  取值
  
this.$store.state.变量名
this.$store.state.goots

const store = new Vuex.Store({
存储值
    state:{
              count:0,
      },
      同步方法可以直接修改数据
    mutations:{
       add2(state){
            state.count++
}
异步方法  调用同步方法
   actions:{
     addAsync(context , num){
       context.commit('add2',num)
     //这边就是调用mutations的方法，这样才能异步，
     不要直接调用state中的数据
}
存值
 this.$store.dispatch('addAsync',5)