vue2-vuex详解

vuex

1. 是什么
   vuex是一个状态管理工具，状态就是数据
   vuex是一个插件，帮我们管理vue通用的数据（多组件共享数据）
2. 使用场景
   • 某个状态在很多个组件中使用（eg：个人信息）
   • 多个组件共同维护一份数据（eg：购物车）
3. 优势
   1. 共同维护一份数据，数据集中化管理
   2. 响应式变化
   3. 操作简洁（vuex提供了一些辅助函数）

构建vuex[多组件数据共享]环境

即创建项目

创建一个空仓库

1. 安装vuex yarn add vuex@3,如果在创建项目时勾选了vuex则不需要执行这一步
2. 新建vuex模块文件（新建store/index.js专门存放vuex）
3. 创建仓库

   Vue.use(Vuex)
   new Vuex.Store()
   

4. 在main.js中导入挂载到Vue实例上

核心概念 - state状态

1. 提供数据
   • state提供唯一的公共源数据，所有要共享的数据都统一放在store中的state中存储，在state对象中添加要共享的数据
   • state与data: state存储所有组件共享的数据，data存储自己的数据
     
2. 使用数据
   • 通过store直接访问
   • 通过mapState辅助函数(简化)
     mapState可以把store里的数据自动映射到组件的计算属性中
     1. 导入mapState import { mapState } from 'vuex'
     2. 数组方式引入state（computed中） mapState(['count'])
     3. 展开运算符映射 computed: { ...mapState(['count']) }

核心概念 - mutations方法

vuex需要遵循单向数据流，组件中不能直接修改仓库的数据
eg：this.$store.state.count++的写法是错误的，为了防止在项目的任意一个地方都能随意修改仓库的数据，就要开启严格模式
开启严格模式：在仓库中配置：strict: true
eg：

// 创建仓库（空仓库）
const store = new Vuex.Store({
  strict: true,
  state: {
  }
})

mutations语法

• 不传参语法
  1. 在仓库中定义mutations对象，对象中存放修改state方法

  mutations: {
      addCount (state) {
          state.count += 1
      }
  }
  

  
  2. 组件提交调用mutations
  this.$store.commit('addCount')
• 传参语法
  1. 在仓库中定义mutations对象，对象中存放修改state方法

  mutations: {
      // n就是提交载荷payload
      addCount (state, n) {
          state.count += n
      }
  }
  

  2. 组件提交调用mutations
     this.$store.commit('addCount', n)
     【注意】：传参语法只能传递一个参数，如果想传递多个参数，则可以包装成对象或数组
• 输入框实时输入更新
  【注意】：因为要遵循单项数据流，所以不能用v-model双向绑定
  1. 输入框内容渲染 :value
  2. 监听输入，获取内容 @input
  3. 封装mutations处理函数 mutations传参
  4. 调用传参 commit调用
• mapMutations辅助函数
  mapMutations把位于mutations的方法提取了出来，映射到组件methods中
  mapState在computed中映射状态，mapMutations在methods中映射方法
  1. 导入 import { mapMutations } from 'vuex'
  2. 展开运算符(methods中)
  3. 调用
     

核心概念 - actions处理异步操作

• 使用场景eg：等待一秒后修改state中的值
• 说明：mutations必须是同步的，便于监测数据变化，记录调试，异步操作由actions处理
• 语法：
  1. 在mutations中编写方法
  2. 提供actions方法
     
  3. 页面中dispatch调用
     this.$store.dispatch('setAsyncCount', n)
• mapActions辅助函数
  mapActions把位于actions的方法提取了出来，映射到组件methods中
  1. 导入 import { mapActions } from 'vuex'
  2. 展开运算符(methods中)
  3. 调用
     

核心概念 - getters

• 说明：除了state之外，有时我们还需要从state中派生一些状态，这些状态是一栏state的此时会用到getters
  例如：state定义了list为1-10的数组，组件中需要显示大于5的数据
• 语法：
  1. 定义getters
     
  2. 访问getters
     • 通过store访问
     • 通过辅助函数mapGetters映射（在computed中）
       

核心概念 - 模块module(进阶语法)

由于vuex使用单一状态树，应用的所有状态会集中到一个比较大的对象，当应用变得复杂时就会难以维护
模块拆分：
在store文件夹下新建modules文件夹，再在modules文件夹中创建各个模块文件，然后在index.js中引用

• 分模块语法
  单个模块文件中：

  const state = {}
  
  const mutations = {}
  const actions = {}
  const getters = {}
  
  export default {
      state,
      mutations,
      actions,
      getters
  }  
  
  

  index.js文件中：

  import user from './modules/user'
  modules: {
      user,
      setting
  }
  

  
• 使用模块中state的数据
  1. 直接通过模块名访问 $store.state.模块名.xxx
  2. 通过mapState映射
     • 默认根级别的映射：mapState(['xxx'])
     • 子模块的映射（需要开启命名空间）： mapState('模块名', ['xxx'])
       开启命名空间：export default { namespaced: true }
• 使用模块中getters的数据
  1. 直接通过模块名访问 $store.getters['模块名/xxx']
  2. 通过mapGetters映射
     • 默认根级别的映射：mapGetters(['xxx'])
     • 子模块的映射（需要开启命名空间）： mapGetters('模块名', ['xxx'])
       开启命名空间：export default { namespaced: true }
• 模块中的mutations调用语法
  【注意】：默认模块的mutations和actions会被挂载到全局，需要开启命名空间，才会被挂载到子空间
  调用子模块中的mutations：
  1. 直接通过store调用
     $store.commit('模块名/xxx', 额外参数)
  2. 通过mapMutations辅助函数映射
     • 默认根级别的映射：mapMutations('[xxx]')
     • 子模块的映射: mapMutations('模块名', '[xxx]')
• 模块中的actions调用语法
  【注意】：默认模块的mutations和actions会被挂载到全局，需要开启命名空间，才会被挂载到子空间
  调用子模块中的actions：
  1. 直接通过store调用
     $store.dispatch('模块名/xxx', 额外参数)
  2. 通过mapActions辅助函数映射
     • 默认根级别的映射：mapMutations('[xxx]')
     • 子模块的映射: mapMutations('模块名', '[xxx]')

原文地址：https://blog.csdn.net/2301_81022805/article/details/143666512

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！