目录
前言
这是一个系列的学习，可能很多C站的其他优秀的博主也记录够相关的博文，声明，该博文是博主本人自己再学习vue的路上的一个学习过程的见证，如有雷同，纯为巧合哦！后面还有很多的学习知识很多前辈大佬已经给我们教授，我们只能说是在前人的肩膀上学习总结，C站还有很多的博主记录本内容，不喜勿喷，知识看谁记录的详细而已。好了，开始我们今天的学习遨游之旅！！
一、什么是Vuex
这个Vuex是一个专门为了vue项目开发而开发的状态管理的模式。因为我们的vue组件之间都会存在自己的状态，并且每一个数据之间都需要共享需要的数据。我们可以简单的理解为Vuex的应用急速一个容器，它用来定义应用当中的数据以及数据处理工具，核心就是store，当组件应用了store中的状态的时候，如果状态发生了变化，那么相应的组件也会发生变化，组件的数据也会发生数据的更新。
这个状态自管理应用包含以下几个部分：
- 状态，驱动应用的数据源；
- 视图，以声明方式将状态映射到视图；
- 操作，响应在视图上的用户输入导致的状态变化。
二、安装Vuex
1、下载Vuex.js
我们可以登录官方网站进行下载，在这里我们提供一个官网的链接，大家可以自行去下载即可。
链接：安装 | VuexVue.js 的中心化状态管理方案
https://vuex.vuejs.org/zh/installation.html
官网这边提供了下载的教学方式，大家可以很简单的去看一下也可以，条条大路通罗马，方法有很多，不至于拘泥于小编的博客。
2、引入vuex.js
我们直接在我们的界面上先引入我们的vue.js ，然后再引入vuex.js.这个步骤简单，代码如下：大家直接复制也可以。
<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>3、Vuex的用法
首先要使用Vuex，那么我们先要通过new这个关键字实例化一个我们的项目实例，这个实例是单个的状态树。我们创建store的代码语法如下所示：
new Vuex.store({
state:{}, //竹竿天，组件中需要我们共享的数据
mutations:{},//改变状态的唯一办就是提交mutations，同步我们改变的状态
actions：{} //用于同步更新状态
}）接着，我们要将我们的store这个实例注入到Vue根实例当中；
var vm = new Vue({
el:'#app',
store,
})在最后通过我们的根实例中注册的store选项，这个store实例就会注入到我们的根组件下面的所有的子组件当中，这样子组件就会通过this.$store进行对store数据的访问。我们可以通过一段实例代码可以了解一下我们这个部分的理解。
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vuex的使用</title>
</head>
<body>
<div id="app">
<p>姓名：{
{name}}</p>
<p>性别：{
{gender}}</p>
<p>年龄：{
{age}}</p>
</div>
</body>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script>
var store = new Vuex.Store({
state:{
name:'丘比特',
gender:'男',
age:22
},
})
var vm = new Vue({
el:'#app',
store,
computed:{
name(state){return this.$store.state.name},
gender(state){return this.$store.state.gender},
age(state){return this.$store.state.age},
}
})
</script>
</html>运行结果：
我们可以看到我们的实例已经可以显示我们state里面的数据了。
三、Vuex配置选项
我们前面记录学习的vue的部分，也有相关vue的配置选项的学习，所以Vuex也有他相应部分的配置选项，大家如果需要看vue的配置选项，有兴趣的可以到博主的主页搜索就可以了。
在创建store实例的时候，我们需要传入一个配置的对象，我们往下一个个说明。
1、state配置选项
在这里稍微的补充一下知识点，Vuex的状态存储都是立马响应的，当我们的vue组件从store读取数据的时候，如果数据变化，页面上面的store数据也会跟着发生变化。
我们上一个的实例代码我们可以知道通过“this.$store.state.name”这个访问到state里面的name这个数据，当一个组件需要获取多个组件的时候，将这一些状态全部进行声明成为计算属性computed有点繁琐，由于为了解决繁琐的初衷，我们的Vuex就提供了一个mapState辅助函数生成计算属性！
使用这个辅助函数的时候，先要引入这个函数。这个辅助函数的参数有数组的写法和对象的写法一共两种写法。我们可以通过一段实例代码了解。
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vuex的使用</title>
</head>
<body>
<div id="app">
<p>姓名：{
{name}}</p>
<p>博客：{
{boke}}</p>
<p>码龄：{
{age}}</p>
<p>*************************</p>
<p>姓名：{
{n1}}</p>
<p>博客：{
{n2}}</p>
<p>码龄：{
{n3}}</p>
</div>
</body>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script>
var store = new Vuex.Store({
state:{
name:'丘比特',
boke:'丘比特惩罚陆',
age:1
},
})
var mapState = Vuex.mapState;
var vm = new Vue({
el:'#app',
store,
computed:{
...mapState(["name","boke","age"]),//mapstate数组的写法
...mapState({n1:"name",n2:"boke",n3:"age"})//mapstate对象的写法
}
})
</script>
</html>运行结果：
2、getters配置选项
在上面一个的store中会在使用的时候，会派生矗一些数据需要我们处理。Vuex可以允许在store当中定义“getter”选项，getter会将我们的返回值根据它提供的依赖存起来，当依赖值发生变化的时候，getter也会重新计算，简单地说，那就是和computed计算属性一样。我们通过一段代码了解我们这一段属性选项。
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vuex的使用</title>
</head>
<body>
<div id="app">
<h1>电影：《隐入烟尘》票价</h1>
<p>票价：{
{total}}</p>
<p>总票价：{
{totalprice}}</p>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2022%252F0812%252F3e335b62j00rggmlw001oc000hs00awg.jpg%26thumbnail%3D660x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664263935&t=45b74bdee4889fa5660d0418f1043919" alt="">
</div>
</body>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script>
var store = new Vuex.Store({
state:{
price:'100',
num:'2',
},
getters:{
total(state){
return state.price * state.num;
}
}
})
var mapGetters = Vuex.mapGetters;
var vm = new Vue({
el:'#app',
store,
computed:{
...mapGetters(['total']),
...mapGetters({totalprice:'total'})
}
})
</script>
</html>运行结果：
3、mutations配置选项
在每一个mutation当中都有一个字符串的事件类型和一个回调函数。因为我们要进行修改store的数据的话，那么我们就要提交mutation，而且还是同步函数，这样才能跟踪每一个状态的变化情况。在我们的组件当中有两种提交mutation的方法。我们都可以通过下面的代码来了解一下这个mutation的配置选项的内容。
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vuex的使用</title>
</head>
<body>
<div id="app">
<h1>{
{num}}</h1>
<button @click="reduce">减5</button>
<button @click="add({n:10})">加5</button>
</div>
</body>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script>
var store = new Vuex.Store({
state:{
num:100,
},
mutations:{
decrement(state){
state.num--
},
increment(state,payload){
state.num+=payload.n
},
},
})
var mapState = Vuex.mapState;
var vm = new Vue({
el:'#app',
store,
computed:{
...mapState(["num"])
},
methods:{
reduce(){
//这里是通过mutation修改store的状态的意思
this.$store.commit("decrement");
},
add(){
this.$store.commit({type:"increment",n:10});
}
}
})
</script>
</html>运行结果：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vuex的使用</title>
</head>
<body>
<div id="app">
<h1>我想象的中秋国庆放假天数：</h1>
<h1>{
{num}}</h1>
<button @click="reduce({n:5})">减5</button>
<button @click="add({n:10})">加10</button>
</div>
</body>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script>
var store = new Vuex.Store({
state:{
num:100,
},
mutations:{
decrement(state,payload1){
state.num-=payload1.n
},
increment(state,payload2){
state.num+=payload2.n
},
},
})
var mapState = Vuex.mapState;
var vm = new Vue({
el:'#app',
store,
computed:{
...mapState(["num"])
},
methods:{
reduce(){
//这里是通过mutation修改store的状态的意思
this.$store.commit({type:"decrement",n:5});
},
add(){
this.$store.commit({type:"increment",n:10});
}
}
})
</script>
</html>运行结果：
我们可以通过单击的方式看到我们数据的变化，当然还可以到我们后台的vue得1部分看到我们state状态数据的变化。
4、actions配置选项
这个actions这个部分的配置选项，有一点类似于我们上一个的mutation配置选项，但是和上面的mutation不同的是，action这个提交的是mutation这个配置选项，更加的简单粗暴，不是直接更改我们的状态的变化。action可以包含很多歌异步操作，是可以异步的修改state里面的数据。异步修改state也是需要提交一个我们的mutation，才能达到修改的目的。
这个action函数接受一个和store实例具有相同方法和属性的context对象，因此可以钓欧阳context.commit提交一个mutation来获取state或者getter的数据。我们根据代码来了解一下。
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vuex的使用</title>
</head>
<body>
<div id="app">
<h1>我想象的日增资金：</h1>
<h1>{
{num}}</h1>
<button @click="add()">>+100</button>
</div>
</body>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script>
var store = new Vuex.Store({
state:{
num:100,
},
mutations:{
increment(state,payload){
state.num+=payload.n
},
},
actions:{
async ayscIncrement({commit},payload){
setTimeout(()=>{
commit('increment',payload)
},1000)
}
}
})
var mapState = Vuex.mapState;
var vm = new Vue({
el:'#app',
store,
computed:{
...mapState(["num"])
},
methods:{
add(){
this.$store.dispatch({type:"ayscIncrement",n:100});
}
}
})
</script>
</html>运行结果：
上面可以看到我们的演示得结果，当然我们还是可以使用辅助函数mapAtions来进行简化修改，这里大家自己琢磨就好了！
5、modules配置选项
我们使用单一的组件状态树的时候，可以应用的所有状态会几种到一个较大的对象当中，但是当这个应用特别复杂的时候，我们的store就显得很不饱满。所以为了解决这一个问题，我们的Vuex就将store分隔成很多都饿模块modules，这样使得每一个模块都有自己的state、mutation、action等等，这样显得更加的好看。我们可以通过实例代码了解一下这个是什么一回事。
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vuex的使用</title>
</head>
<body>
<div id="app">
<h1>{
{this.$store.state.store1.num}}</h1>
<h1>{
{this.$store.state.store2.num}}</h1>
</div>
</body>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script>
const module1 = {
state:{
num:100
},
getters:{},
mutations:{},
actions:{}
}
const module2 = {
state:{
num:200
},
getters:{},
mutations:{},
actions:{}
}
var store = new Vuex.Store({
modules:{
store1:module1,
store2:module2,
}
})
var vm = new Vue({
el:'#app',
store,
})
</script>
</html>运行结果：
