vuex的基本组成介绍

最新推荐文章于 2025-03-21 08:15:00 发布

qq_39142654

最新推荐文章于 2025-03-21 08:15:00 发布

阅读量2.6k

点赞数

本文链接：https://blog.youkuaiyun.com/qq_39142654/article/details/89706352

版权

vuex

1. 什么是状态？

用一条数据去管理一个视图或是视图中的一部分，那么我们就将这个数据称之为状态

2. 什么是状态管理？

用一条数据去管理一个视图或是视图中的一部分，那么我们就将这个数据称之为状态，这种管理的形式我们称之为 状态管理

3. vuex是做什么的？（概念）

vuex是一个集中式的存储仓库【状态】，类似于本地存储、数据库，vuex是vue的状态管理工具，它的功能主要是实现多组件间的状态【数据】共享

4. vuex的组成部分

state 状态
- state 是一个对象，对象中的每一个key ，就是一个状态
action 动作（业务交互）
- action 是一个对象，对象中的每一个key的value是方法，方法是用来处理业务逻辑
  action 的作用是用来发送一个动作action
  action 发送的动作action 是一个对象，对象中可以有两个参数 type payload
  action中的方法可以有两个参数，分别是store实例中的方法，从视图发来的实际参数
- 第一个：
  {
  commit: ƒ boundCommit(type, payload, options)
  dispatch: ƒ boundDispatch(type, payload)
  getters: {}
  rootGetters: {}
  rootState: {ob: Observer}
  state: {ob: Observer}
  proto: Object
  }
- 第二个：
  视图发来的实际参数
  actions 和 mutations 要想沟通，我们通过 commit 来进行沟通， commit 是发送一个动作
  actions 方法中的动作可以有两个参数 type payload
  type 就是 mutations 中方法的名称
type 要求是一个常量，理由：常量比较稳定，安全性高
payload 就是传递给mutations放发的实际参数
- type.js文件是用来定义当前项目store中所有的项目的常量
  常量书写严办为大写，或者用_表示
mutation 修改state
- mutations 是一个对象
  mutations 用来修改数据
  mutation 也可以储存方法
  mutation 中的方法名称可以使用常量表示
  mutation 中的方法可以镰鼬多个参数分别是state , action
  state 是 store中的state
  action 是 action方法中发过来的action
getter 获取数据的
- getters 也是一个对象，用来获取状态
  getters 里面存放的也是方法
store state的存储者
- state是一个对象，保存了对象中的值，每一个对象的key就是一个状态
应用场景
1. 相对比较大型的应用（状态较多）
判断你的项目是不是应该使用vuex
1. 当你觉得你的项目不需要vuex的时候，那么就不用
2. 你觉得需要的时候，就直接使用
vuex的使用方案有哪些？（state修改前，state修改后）
1. 前标准，后标准
2. 前标准，后非标准
3. 前非标准，后标准
4. 前非标准，后非标准
思维流程:
store.js
this. $s t o r e . c o m m i t (^{'} i n c r e m e n t^{'}) - > m u t a t i o n s t h i s .$ store.dispatch(‘jia’) -> actions
mapActions() ->actions mapGetters()->getters

组员组长老板财务总监组员
在中间传递的就是工资（数据）
(view）component - dispatch > action -> mutation -> state <- getter <- component
发送请求处理修改状态
业务逻辑修改state 读取state
异步

vuex的使用方案有哪些？（state修改前，state修改后）
1. 前标准，后标准
2. 前标准，后非标准
3. 前非标准，后标准
4. 前非标准，后非标准
问题
1. 数据的获取写的太长了，冗余
2. 视图和vuex的交互代码太长了，冗余
- 解决： Vuex提供了4个辅助工具： mapState mapGetters mapActions mapMutaions
  - mapState 我们可能不常用
- mapGetters([gettersFnName]) 使用 {{ gettersFnName }}
```
   new Vue({
     //computed: mapGetters(['getCount']), // 这么写我们的当前组件的自定义计算属性就没有地方放了
     computed: {
       ...mapGetters(['getCount])
     }
   })
```

mapActions([actionsFnName]) 标准

  new Vue({
    methods: {
      ...mapActions([actionsFnName])
    }
  })

mapMutations([mutationsFnName]) 非标准

    <button @click = "mutationsFnName()"></button>

  new Vue({
    methods: {
      ...mapMutations([mutationsFnName])
    }
  })

以上讲的都是用户交互，没有写数据交互
vuex 的数据交互
注意：
- vuex的数据交互写在actions里面
actions.js

  const actions = {
      getDataInfo ( { commit } ) {
        fetch('/data.json')
          .then( res => res.json() )
          .then( data => {
            //获取到数据之后进行动作的创建和发送
            let action = {
              type: 'GETDATAINFO',
              payload: data
            }
            commit( action )

          })
          .catch( error => console.log( error ))
      }
  }

  export default actions

vuex 中的 modules

store目录中放的是目录

<!-- 目录结构 -->
  store
   -index.js
    home
      state.js
      actions.js
      mutations.js
      getters.js
      type.js
      index.js
    shopcar
        state.js
        actions.js
        mutations.js
        getters.js
        type.js
        index.js
    list
      state.js
      actions.js
      mutations.js
      getters.js
      type.js
      index.js
    user
      state.js
      actions.js
      mutations.js
      getters.js
      type.js
      index.js

 // home  下的 index.js 
     import state from './state'
     import actions from './actions'
     import mutations from './mutations'
     import getters from './getters'
     const homeModule = {
       state,
       actions,
       mutations,
       getters
     }
     export default homeModule
 // store 下的  index.js 
   const store = new Vuex.Store({
     modules: {
       //key: value   // key就是目录名称， value就是目录下的index.js导出的模块
       home: homeModule
     }
   })
   export default store
 ```