vuex

最新推荐文章于 2022-10-31 00:01:58 发布

weixin_44889992

最新推荐文章于 2022-10-31 00:01:58 发布

阅读量89

点赞数

分类专栏： vue 文章标签： vuex

本文链接：https://blog.csdn.net/weixin_44889992/article/details/90228872

版权

vue 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

vuex
1. 什么是状态？

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

2. 什么是状态管理？

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

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

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

4. vuex的组成部分

state 状态
action 动作（业务交互）
mutation 修改state
getter 获取数据的
store state的存储者

5. 应用场景

1. 相对比较大型的应用（状态较多）

6. 判断你的项目是不是应该使用vuex

1. 当你觉得你的项目不需要vuex的时候，那么就不用 
2. 你觉得需要的时候，就直接使用

7. 思维流程:

思维流程:
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
异步

8. vuex的使用方案有哪些？（state修改前，state修改后）

前标准，后标准 √
前标准，后非标准 √
前非标准，后标准 √
前非标准，后非标准 √

9. 问题

数据的获取写的太长了，冗余
视图和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
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