Vuex实践

最新推荐文章于 2024-09-20 12:30:13 发布

原创最新推荐文章于 2024-09-20 12:30:13 发布 · 188 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了专为 Vue.js 应用程序开发的状态管理模式 Vuex，它可管理共享状态。阐述了 State、Getter、Mutation、Actions 的作用，还提及了目录结构，包括 homeInfo.js 和 index.js 文件内容，以及 vueX 数据的读取和赋值。

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。Vuex 可以帮助我们管理共享状态。

State ：唯一数据源，定义的变量都在这里面

Getter ：从State中派生出来一些状态（可以认为getter是store的计算属性），只有当它的依赖被改变时才会触发

Mutation: 更改store中状态的唯一方法，Mutation必须是同步函数

Actions ： Actions类似于Mutation。不同点：Actions提交的是Mutation，而不是直接更改状态，Actions可以包含任何异步操作

目录结构：

在这里插入图片描述

homeInfo.js文件内容

const state = {
  homeInfoData: ''
};
const getters = {
  homeInfoDataMap (state) {
    return state.homeInfoData;
  }
}

const mutations = {
  updateHomeInfoData (state, payload) {
    console.log('payload', payload);
    state.homeInfoData = payload;
  }
};

const actions = {
  updateHomeInfoData ({commit, state}, usersInfo) {
    commit('updateHomeInfoData', usersInfo)
  }
}
export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}

index.js文件内容

import Vue from 'vue'
import Vuex from 'vuex'
// import createPersistedState from 'vuex-persistedstate'; //持久化数据状态，防止刷新vuex数据丢失
import homeInfo from '@/store/modules/homeInfo.js'
Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    homeInfo
  }
  // plugins: [createPersistedState()],
})

vueX数据的读取和赋值

import { mapActions } from 'vuex';

methods: {
    ...mapActions('homeInfo', ['updateHomeInfoData']),
    clickBtn () {
      this.updateHomeInfoData('update'); // 更新数据
      console.log('homeInfoData', this.$store.state.homeInfo.homeInfoData)
    }
  }