标签：getters modules mapState state user 模块 Vue3 浅析 store

一、vuex的基本使用

1、vuex 的基本结构及基本使用：src/store/index.js 中，代码如下

// vue3中创建store实例对象的方法createStore()按需引入
import { createStore } from 'vuex'

export default createStore({
  state: {
    info: 'hello'
  },
  getters: {
    // 定义一个getters
    formatInfo (state) {
      return state.info + ' Tom'
    }
  },
  mutations: {
    // 定义mutations，用于修改状态(同步)
    updateInfo (state, payload) {
      state.info = payload
    }
  },
  actions: {
    // 定义actions，用于修改状态(异步)
    // 2秒后更新状态
    updateInfo (context, payload) {
      setTimeout(() => {
        context.commit('updateInfo', payload)
      }, 2000)
    }
  },
  modules: {
  }
})

2、组件模板中和 script 中  - 对store中数据的操作与使用

<template>
  <div>测试组件</div>
  <hr>
  // 页面中直接使用渲染时，与vue2中的使用方法相同
  <div>获取Store中的state、getters: {{$store.getters.formatInfo}}</div>
</template>

<script>
// 按需引入useStore()方法
import { useStore } from 'vuex'

export default {
  setup () {
    // Vue3中store类似于Vue2中this.$store  -  this.$store.state.info
    // useStore()方法创建store对象，相当于src/store/index.js中的store实例对象
    const store = useStore()
    console.log(store.state.info) // hello
    // 修改info的值
    const handleClick = () => {
      // 触发mutations，用于同步修改state的信息
      // store.commit('updateInfo', 'nihao')
      // 触发actions，用于异步修改state的信息
      store.dispatch('updateInfo', 'hi')
    }
    return { handleClick }
  }
}
</script>

二、将store中的数据模块化后的使用

1、模块化

　　基于原 index.js 代码进行改造拆分，假设有两个模块 global（全局的） 和 user（局部的），新建 src/store/modules/global.js 、src/store/modules/user.js 文件。

// 拆分后代码如下（src/store/modules/global.js）
// 全局store, 存放全局使用共享的数据
export default { // 注意：全局模块中不需要开启命名空间
  state: {},
  mutations: {},
  actions: {},
  getters: {}
}

// 拆分后代码如下（src/store/modules/user.js）
// 用户信息模块(局部模块)
export default {
  namespaced: true, // 开启命名空间
  state () {
    return {
      // 用户信息对象 
      profile: {
        id: '',
        nickname: 'yee'
      }
    }
  },
  mutations: {
    // 定义mutations，用于同步修改状态
    updateNickname (state, payload) {
      state.profile.nickname = payload
    }
  },
  actions: {
    // 定义actions，用于异步修改状态
    // 2秒后更新状态
    updateNickname (context, payload) {
      setTimeout(() => {
        context.commit('updateNickname', payload)
      }, 2000)
    }
  },
  getters: {
    // 定义一个getters
    formatNickname (state) {
      return 'Hi ' + state.profile.nickname
    }
  }
}

　　拆分后代码如下（src/store/index.js）：全局模块是解构，局部模块是放到 modules 里

import { createStore } from 'vuex'
// 全局模块
import global from './modules/global'
// 局部模块
import user from './modules/user'

export default createStore({
  // 全局模块
  ...global,
  // 局部模块
  modules: {
    user
  }
})

2、组件中对模块化后的store中数据的操作与使用

// 组件模板中获取
<div>获取Store中user模块的getters: {{$store.getters['user/formatNickname']}}</div>

// 组件 script 中获取
import { useStore } from 'vuex'
export default {
  setup () {
    // Vue3中store类似于Vue2中this.$store
    const store = useStore()
    console.log(store.state.user.profile.nickname)
    // 修改nickname的值
    const handleClick = () => {
      // 触发mutations，用于同步修改user模块state的信息
      store.dispatch('user/updateNickname', 'Yee')
    }
    return { handleClick }
  }
}

三、vue3.0下如何使用mapState，mapGetters和mapActions

　　可以看这篇文章：https://blog.csdn.net/qq_16139383/article/details/119935755 和 https://blog.csdn.net/weixin_45389051/article/details/118639403

标签：getters,modules,mapState,state,user,模块,Vue3,浅析,store
来源： https://www.cnblogs.com/goloving/p/15534809.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。