vue2中的状态管理工具Vuex

VUEX---状态管理工具

作用：用来管理各组件共享数据的工具，组件通信传递数据的时候，子传父，父传子的方式复杂不易维护，vuex提供一个仓库，存储共享数据，用于组件数据通信，各组件的数据是同步的，实现响应式开发。

构建 vuex 环境

• 创建一个项目，有两个子组件，和根组件之间共享数据，三者数据同步，任何一个组件可以修改数据

创建一个空仓库

安装VUEX (手动)

如果选择手动安装，vue2输入命令npm install vuex@3 ，如果报错可能是依赖产生冲突，可再尝试npm install vuex@3 --force 试一试

新建文件模块

在 src 下新建一个文件夹 store ，在里面新建一个 index.js 文件，里面存放的就是vuex的核心代码

创建仓库

//先导入核心包
import Vue from 'vue'
import Vuex from 'vuex'

//安装插件
Vue.use(Vuex)

//创建仓库,空的
const store = new Vuex.store()

//到处给main.js使用
export default store

main.js导入挂载

使用仓库---state

state 提供唯一的公共资源，所有共享的数据都要统一放到 Stpre 中的State 存储，在state 对象中可以添加我们要共享的数据。

注意：state 状态，即数据，类似组件中的 data, 但data是组件自己的数据，state 是所有组件共享的数据

获取数据

获取 store:

1. this.$store

2. import 导入 store

模板中： {{ $store.state.xxx }}

组件逻辑中：this.$store.state.xxx

JS模块中：store.state.xxx

​

辅助函数

每次获取仓库数据的时候，都要 <math xmlns="http://www.w3.org/1998/Math/MathML"> s t o r e 或者 t h i s . store或者this. </math>store或者this.stroe 比较重复难写，可以把state 中是的数据，定义在组件计算属性中

computed: {
  count () {
    return this.$store.state.count
  }
}

//模板中使用数据就可以直接 {{ count }}

• 通过赋值函数简化： mapState 是辅助函数，帮我们把 store 的数据 自动映射到组件的计算属性中，这个函数是vuex提供的一个函数就可以调用，使用时需要导出来，以数组的方式引入state,最终这个函数得到的是一个对象

//从vuex中导入函数
import { mapState } from 'vuex'

//在计算属性中写入辅助函数
computed () {
  //count () {return this.$store.count} 之前是这么一个个写
  ...mapState(['count','title'])
}
//同样在模板中就直接写 {{count}} 简写形式

修改数据--mutations

• vuex同样遵循单向数据流，组件中不能直接修改仓库的数据
• 单向数据流： 你可以理解为只读文件，你能读，但是不能修改，如果要修改就要通知xxx,让xxx修改，如果要修改，就需要发送请求给仓库进行修改。在一个子组件中强行写入执行函数，虽然可以运行，但修改的组件多了，维护时就不容易知道是谁修改的，不满足工程化开发要求。

Mutations的基本使用

自动接口插件

• json-seerver 当我们前端页面写好之后，后端接口没准备好，我们就可以通过临时搭建的服务器，自己生成接口调用，来测试自己的web项目

• 全局安装： npm install -g json-server

• 在项目下创建一个db文件夹，文件夹里面创建一个文件index.jsonw文件，里面就可以存放我们需要的数据，只要提供数组包对象的格式，插件就会自动给我们提供增删改查的一套接口，

• 然后在db文件下打开终端，输入json-server --watch index.json命令，就启动了服务器环境，根据提供的端口号，就可以查看返回的数据，进行页面渲染。

• 服务器启动成功之后，窗口不能关闭，不然访问不了。

  注意： 这里只是模拟一个临时的假数据，用来进行测试的，等后端提供接口之后就可以直接还了。
  npm安装axios时，npm install axios安装可能报错，试一试npm install axios --save --legacy-peer-deps。

  原因：npm install axios是最新版的axios，如果你电脑以前安装的是旧版本，有些依赖包就会没安装到

  ​

store仓库的用法

模块创建

• 在store下创建一个文件夹modules，里面放的就是各个模块的数据

  子模块cart.js

  import axios from 'axios'
  export default {
    namespaced: true,
    state () {
      return {
        // 购物车数据
        list: []
      }
    },
    mutations: {
      updateList (state, newList) {
        state.list = newList
      }
    },
    actions: {
      // 异步请求数据
      async getList (context) {
        const res = await axios.get('http://localhost:3000/frends')
        //console.log(res)
        context.commit('updateList', res.data)
      }
    },
    getter: {}
  }

  根文件index.js

  import Vue from 'vue'
  import Vuex from 'vuex'
  import cart from './modules/cart'
  
  Vue.use(Vuex)
  
  export default new Vuex.Store({
    modules: {
      cart
    }
  })

  ​