前端学习笔记-vue2-vuex

vuex

概念

1. 专门在vue中实现集中式状态（数据）的一个vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信

2. 使用场景：

   1. 多个组件依赖于同一状态
   2. 来自不同组件的行为需要变更同一状态

工作原理

1. actions 响应组件中的动作
2. mutations 操作数据
3. state 存储数据
4. getters 将state中的数据进行加工

搭建vuex

1. 安装插件 npm i vuex
2. Vue.use(vuex)
3. store
4. vc==>store

基本使用

1. 初始化数据，配置actions，mutations，操作文件store.js
2. 组件中读取vuex中的数据，$store.state.数据
3. 组件中修改vuex中的数据，$store.dispatch(‘action’, 数据) 或 $store.commit(‘mutation’,数据)

若没有网络请求或其他业务逻辑，组件中也可以越过actions，直接写commit

map方法使用

1. mapState 映射state中的数据为计算属性
2. mapGetters 映射getters中的数据为计算属性
3. mapActions 生成与cations对话的方法
4. mapMutations 生成与mutations对话的方法

模块化+命名空间

目的：让代码更好维护，让多种数据分类更加明确

配置步骤

1.修改store，开启命名空间，各组件分模块引入

const module1 = {
    namespaced:true,
    state:{...},
    mutations:{...},
    actions:{...},
    getters:{...}
},
const module2 = {
    namespaced:true,
    state:{...},
    mutations:{...},
    actions:{...},
    getters:{...}
},
//...
const modulen = {
    namespaced:true,
    state:{...},
    mutations:{...},
    actions:{...},
    getters:{...}
},
const store = new Vuex.Store({
    modules:{
        module1,
        module2,
        ...
        modulen
    }
})

2.开启命名空间后，组件中读取state数据

//方式一 直接读取
this.$store.state.module1.?
//方式二 借助mapState
...mapState('module1',['?']);

3.开启命名空间后，组件中读取getters数据

//方式一 直接读取
this.$store.getters['module1/?']
//方式二 借助mapState
...mapGetters('module1',['?']);

4.开启命名空间后，调用dispatch

//方式一 直接读取
this.$store.dispatch('module1/?',value)
//方式二 借助mapState
...mapActions('module1',['?']);

5.开启命名空间后，调用commit

//方式一 直接读取
this.$store.commit('module1/?',value)
//方式二 借助mapState
...mapMutations('module1',['?']);

更多前端学习笔记