vuex笔记

Mr_zrh

已于 2022-06-20 10:59:17 修改

阅读量109

点赞数

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

于 2022-06-08 11:08:55 首次发布

本文链接：https://blog.csdn.net/Mr_zrh/article/details/125180555

版权

vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本文详细介绍了在 Vue.js 应用中如何使用 Vuex 进行状态管理。通过实例展示了 state、getters、mutations 和 actions 的用法，包括如何在组件中通过 mapState 和 mapActions 访问和修改全局状态，以及如何通过模块化管理更复杂的应用状态。

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


import Vue from 'vue';
import Vuex from 'vuex';
 
Vue.use(Vuex)
 
export const store = new Vuex.Store({
        state : {
            count:6
        },
        // 相当于Vuex中的计算属性
        getters:{
            doCount: (state, getters) => {
                return getters.doneTodos.length
              },
              //getters里的第一个参数是state，第二个是getters本身
            doneTodos:(state) =>{
                return state.count+2
            }            
        },
        mutations : {
            counts(state, v) {
                state.count = v;
            },
            addNum(state,v) {
                if(v){
                    state.count += v
                }else{
                    state.count ++
                }
            },
            reduceNum(state) {
                state.count --
            }
        },
        actions : {
            actionNumAdd(state) {
             // axios.get("/customer/user_info").then(res => {
             //     state.commit(addNum, res.data);
             // });
             //这里可以直接掉接口，并赋值，第一个参数是mutation里对应的名字，第二个参数是传的值
                state.commit('addNum', 6);
            },
            actionNumReduce(v) {
             // axios.get("/customer/user_info").then(res => {
             //     state.commit(addNum, res.data);
             // });
             //这里可以直接掉接口，并赋值，第一个参数是mutation里对应的名字，第二个参数是传的值
                state.commit('reduceNum', 6);
            }
        }
    })

## 引入页面
import { mapState, mapActions } from 'vuex'
// getter 和state 差不多

  computed: {
    ...mapState('user', ['userInfo']),
    ...mapState('enterprise', ['enterprise']),
	// 第一个user是user板块下的userInfo 可以直接打印
  },
methods: {
    ...mapActions('enterprise', ['find']),
     this.find({ customer: this.userInfo.id })
    }
## 模板化
在index的主版块下直接用moudel
import user from './modules/user.store'
// 引入你自己的路径
  modules: {
    user,
  },




// 下面是写法实例
先是store 里的

```html
const demo = {
  namespaced: true,
  state () {
    return {
      listEnterpriseUser: '1'
    }
  },
  getters: {
    demoList:(state) => {
       return state.listEnterpriseUser + 'getters'
    }
  },
  mutations: {
    SetenterpriseId: (state, payload) => {
      state.listEnterpriseUser = payload
    }
  },
  actions: {
    getDemo(state) {
      setTimeout(() => {
        state.commit('SetenterpriseId','123123')
      }, 300);
    }
  }
}

export default demo

// 下面是页面里的实例调用

import { mapState, mapActions, mapGetters, mapMutations } from ‘vuex’
computed: {
…mapState(‘demo’, [‘listEnterpriseUser’]),
…mapGetters(‘demo’, [‘demoList’])
},
methods: {
…mapActions(‘demo’, [‘getDemo’]),
…mapMutations(‘demo’, [‘SetenterpriseId’]),
},