vuex的集中管理使用

一、vuex是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以

相应的规则保证状态以一种可预测的方式发生变化。

二、使用步骤

1.安装

代码如下（示例）：

npm install vuex@3 --save

2.基本使用

一、数据较少

在src的文件夹下创建文件夹store，在该文件夹下创建index.js，书写基本的代码

大致结构为：

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API请求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方

代码如下（示例）：

// 导入
import Vue from 'vue'
import Vuex from 'vuex'

// 使用
Vue.use(Vuex)

// state 存储数据
const state = {}

// mutations 修改state的数据
const mutations = {}

// actions 书写业务逻辑，处理异步
const actions = {}

// getters 理解为计算属性，简化数据
const getters = {}

// 暴露
export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

在入口文件需要引入挂载：

// 引入仓库
import store from '../src/store/index.js'

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

二、使用

例如在App.vue进行使用，页面的结构为

<template>
  <div id="app">
    <p>仓库的数据:{{ num }}</p>
    <button @click="add(1)">点击仓库的数字加一</button>
    <button @click="add(-1)">点击仓库的数字减一</button>
  </div>
</template>

读取仓库的num：

<script>
import { mapState } from 'vuex'
export default {
  name: 'App',
  methods: {
    add(num1) {
      this.$store.dispatch('add', num1)
    }
  },
  computed:{
     ...mapState(['num'])
  }
}
</script>

在store的index.js书写简单的逻辑:

// 导入
import Vue from 'vue'
import Vuex from 'vuex'

// 使用
Vue.use(Vuex)

// state 存储数据
const state = {
  num: 1
}

// mutations 修改state的数据
const mutations = {
  ADD(state, num1) {
    state.num += num1
  }
}

// actions 书写业务逻辑，处理异步
const actions = {
  add({ commit }, num1) {
    commit('ADD', num1)
  }
}

// getters 理解为计算属性，简化数据
const getters = {}

// 暴露
export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

三、数据较大

当数据很多很大的时候，管理起来很是麻烦，这时候需要对数据进行模块化的管理，将每个区域划分好

大致结构为：

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API请求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    └── modules
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块

store下的index.js就要改结构：

// 导入
import Vue from 'vue'
import Vuex from 'vuex'

// 使用
Vue.use(Vuex)

// 引入小仓库
import cart from './modules/cart.js'
import products from './modules/products.js'

// 暴露
export default new Vuex.Store({
  modules: {
    cart,
    products
  }
})

cart.js的结构为：

// cart模块
const state = {
  num: 1
}

const mutations = {
  ADD(state, num1) {
    state.num += num1
  }
}

const actions = {
  add({ commit }, num1) {
    commit('ADD', num1)
  }
}

const getters = {}

// 暴露
export default {
  namespaced: true, // 开启命名空间
  state,
  mutations,
  actions,
  getters
}

products.js的结构为(基本结构):

// products模块
const state = {}

const mutations = {}

const actions = {}

const getters = {}

// 暴露
export default {
  namespaced: true, // 开启命名空间
  state,
  mutations,
  actions,
  getters
}

四、使用

因为使用模块化的解决思路，在读取和修改的时候我们需要开启命名空间，在读改的时候，只需要指明读取和更改

的的模块的名字，就可以修改和读取数据，页面的主要修改在于读取：

<script>
import { mapState } from 'vuex'
export default {
  name: 'App',
  methods: {
    add(num1) {
      this.$store.dispatch('cart/add', num1) // 修改cart下的num
    }
  },
  computed:{
     ...mapState('cart',['num']) // 读取cart的num
  }
}
</script>

---

总结

例如：以上就是今天要讲的内容，本文简单介绍了vuex的使用，详细的内容参考：https://vuex.vuejs.org/zh/guide/