Vuex

Vuex：也是组件之间的通讯方式，是数据的存储的仓库
优点：
- 状态管理
- 数据共享
- 流程清晰
- 数据响应式

版本

vue2 => vuex3 => 下包：npm i vuex@3
vue3 => vuex4 => 下包：npm i vuex@4

配置

下包
- npm i vuex@4
在 store > index.js 中引入 Vuex
```
import {createStore} from 'vuex'
```

配置 Store

const store = createStore({
    //数据源
    state:{},
    //直接操作数据源(同步)
    mutations:{},
    //间接操作数据库(异步)
    actions:{},
    //仓库的计算属性
    getters:{}
})

导出
```
export default store
```

在 main.js 全局声明使用

// 引入
import store from './store'
// 挂载
app.use(store)

所有的组件都可以访问 this.$store

使用

state
- 数据源
```
state:{
    count:10
}
```

mutations

直接操作数据源（同步）

* 参数1: state(数据源)
* 参数2：params(commit传来的参数)

mutations:{
    countMutations(state,params){
        console.log(state,params);
        state.count = params
    }
}

actions

间接操作数据源（异步）

* 参数1：context(上下文) => 常用的`commit`和`dispatch`可以结构出来使用
* 参数2：params(dispatch传入过来的参数)

actions:{
    countActions({commit},params){
        // 调用mutations中的函数
        commit("countMutations",params)
    }
}

getters

vuex的计算属性

* 参数：state(数据源)

getters:{
    countHandler(state){
        return state.count * 2
    }
}

示例：//store>index.js
const store = createStore({
    state:{
        count:1
    },
    mutations:{
        countMutations(state,params){
            state.count = params
        }
    },
    actions:{
        countActions({commit},params){
            commit("countMutations",params)
        }
    },
    getters:{
        getCount(state){
            return state.count*10
        }
    }
})

获取Vuex中的数据

语法1：不推荐
```
this.$store.state.count
```

语法2：使用辅助函数

...mapState(["count"])

* 仓库的数据的变量与此处导入的变量需要一致

语法3：使用辅助函数、对象，可别名

...mapState({
    num:(state)=>state.count
})

获取getters中的数据

语法1：不推荐
```
this.$store.getters.getCount
```

语法2：使用辅助函数

...mapGetters(["getCount"])

* 仓库的数据的变量与此处导入的变量需要一致

语法3：使用辅助函数、对象，可别名

...mapGetters({
    countHandler:"getCount"
})

调用vuex中的mutations
- 操作 mutations，使用 commit
- 语法：this.$store.commit("mutations中的函数名",该函数的实参)
```
this.$store.commit("countMutations",100)
```
调用vuex里面的actions
- 操作 mutations，使用 dispatch
- 语法：this.$store.dispatch("actions中的函数名",该函数的实参)
```
this.$store.dispatch("countActions",200)
```

Vuex模块化

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿
解决：Vuex 允许我们将 store 分割成**模块(module)。**每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块

import { createStore } from 'vuex' // 引入Vuex
import Person from './modules/Person.js' // 引入Person子模块
import Student from './modules/Student.js' // 引入Student子模块
// 全局模块
const state = {}
const mutations = {}
const actions = {}
const getters = {}
const store = createStore({
    state,
    mutations,
    actions,
    getters,
    // 子模块
    modules:{
        // 小vuex
        Student,
        Person,
    }
})

`Student子模块：Student.js`
export default {
    state:{},
    mutations:{},
    actions:{},
    getters:{}
}

命名空间

使子模块相互独立

使用：namespaced: true

export default {
    namespaced: true,
    state:{},
    mutations:{},
    actions:{},
    getters:{}
}

模块化中的使用

带命名空间

获取子模块中的数据
- 语法1：与是否带命名空间的语法一致
```
this.$store.state.Student.count
```
- 语法2：
```
...mapState("Student",["count"])
```
- 语法3：与是否带命名空间的语法一致
```
...mapState({
    num:(state) => state.Student.count
})
```

获取子模块getters中的数据

语法1：
```
this.$store.getters["Student/count2"]
```
语法2：
```
...mapGetters("Student",["count2"])
```

调用mutations和actions中的函数

调用mutations中的函数

this.$store.dispatch("Student/SET_COUNT",200)

调用actions中的函数

this.$store.dispatch("Student/setcount",200)

不带命名空间

获取子模块中的数据

语法1：
```
this.$store.state.Student.count
```

语法2：

...mapState({
    num:(state) => state.Student.count
}

获取子模块getters中的数据

语法1：
```
this.$store.getters.getCount
```
语法2：
```
...mapGetters(["getCount"])
```

调用mutations和actions中的函数
- 调用mutations中的函数
```
this.$store.dispatch("SET_COUNT",200)
```
- 调用actions中的函数
```
this.$store.dispatch("setcount",200)
```