vuex入门和使用

1.vuex概述

1.1vuex是什么？

vuex是一个状态管理工具，状态就是数据。

1.2场景

1. 某个状态在多个组件中来使用。
2. 多个组件共同维护一份数据。

1.3优势

1. 共同维护一份数据，数据集中化管理
2. 响应式变化
3. 操作简介（vuex提供了一些辅助函数）

2.vuex的使用

2.1创建一个空仓库

1. 下载vuex
2. 注册使用vuex
3. 创建store仓库
4. 导出store给main.js使用
5. 在main.js中挂载到new Vue实例中

具体代码如下
在src目录下新建一个文件store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
const store = new Vuex.Store()
export default store

在main.js中代码如下

import Vue from 'vue'
import App from './App.vue'
import store from '@/store/index'
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

那么如何判断store仓库是否建立成功呢？
随便找个文件中写入如下代码：

  created() {
    console.log(this.$store);
  },

输出结果如下：

可以看到已经拿到store了，证明store仓库已经建立成功了。
这个空仓库已经建立成功了，那么如何给仓库提供数据呢？这时候就要用到state了。

2.2 state

2.2.1state介绍

state给store提供唯一的数据源，所有的数据都放到store的state中存储。
代码如下：(store/index.js文件中)

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
const store = new Vuex.Store({
  state:{
    name:"我爱学前端",
    age:18
  }
})
export default store

数据已经存入到store中去了，那么如何获取使用数据呢？

2.2.2使用数据

2.2.2.1通过store直接访问数据（$store.state.xxx）

代码如下：

2.2.2.2通过辅助函数mapState访问数据

因为上述获取数据的方法每次都要写很长，所以vue提供了一个简化写法，就是mapState辅助函数。

mapsState辅助函数是帮我们把store中的数据自动映射到组件computed计算属性中，它返回的是一个与computed数据对应的对象。

2.2.2.2.1 mapState使用

1. 从vuex中按需导入mapState函数
2. 以数组的方式引入state
3. 展开运算符映射

代码如下

打印结果：

可以看到上述结果是一个对象，对象里面有name和age两个方法。
因此我们可以把这个结果赋值给computed，但是为了避免computed被占用，不能写其他的computed属性，所以我们用扩展运算符。
代码如下：

页面输出结果如下

可以看到通过mapState已经拿到state中的数据了。

2.3更改数据

2.3.1mutations基础使用

vue组件中不能直接修改仓库数据，虽然通过this.$store.state.xxx=xxx(错误写法)也能修改数据的值，但是并不推荐这样做，因为这样会使得数据不可控制，vuex中同样遵循单向数据流，组件中不能直接修改仓库中的数据而是通过mutations进行修改。

通过vue中的strict:true可以开启严格模式，可以检测不规范的代码进行及时的纠错(代码上线的时候需要关闭该严格模式)。

开启严格模式代码如下:(store/index.js)

组件中直接修改store中的数据:

此时页面结果报错:

mutations的使用分两步：

1. 定义mutation对象，存放修改state的方法。
2. 组件中通过this.$store.commit调用mutations

代码如下：

store/index文件

组件中：

此时通过mutations修改数据，页面中就不会报错了。

2.3.1mutations传参

上述代码中mutations的第一个参数是state，要修改的数据，它的第二个参数为修改成什么数据。

mutations有且只能有一个参数，如果有多个参数包装成一个对象即可。

2.3.1mutations更改input框的值

因为vuex的值是单向数据流，所以不能用v-model绑定input框的值进行修改。

因为input框v-mode写法是value和input事件的合写，所以可以把v-model进行拆解为这种写法，进行更改值。

代码如下：

2.3mapMutations辅助函数

mapMutations辅助函数和mapState很像，它是把位于mutations中的方法提取了出来，映射到了组件的methods中。

映射关系

代码如下：

2.4acions处理异步操作

actions处理异步操作，比如说一秒钟之后将state中的age值改为30，请求数据之后，需要改变某个值，这时候就需要用actions。

为什么不用mutations？因为mutations是必须同步的。便于检测数据变化，方便调试。

如果我们将mutations中写异步函数


可以看到页面中报错了。此时我们就需要用到actions处理异步更改数据。

actions是帮我们处理掉异步，在内部还是通过mutations更改数据。

代码如下：

2.5mapActions辅助函数

mapAction是把位于actions中的方法提取出来，映射到组件的methods中。
代码如下：

2.6getters

2.7module模块化

如何获取模块中state的值？

有两种方式获取，模块中的state值最终都会挂在到根sate中去，所以可以把模块名看作是state中的属性。

通过$store.state获取

因此可以直接通过$store.state.模块名获取值

通过mapState函数获取

也可以通过mapState辅助函数获取，通过mapState([‘模块名’])拿到的是一个对象，比如上述例子中获取的就是{name:‘我是模块user’}

只拿到某个模块，并且拿到它里面的某个值，就需要命名空间，相当于给某个模块取一个名字，精准的拿到模块里面的某个值。

如何获取模块化getters中的值？

通过store获取getters的值

通过mapGetters获取模块中getters的值

通过命名空间访问：

模块化中的mutations和actions更改数据

mutations通过store更改值

mutations通过mapsState

mutations通过通过命名空间

actions通过store更改值

actions通过mapActions更改值