vuex使用合集

vuex在项目中使用频率很高，此文介绍了vuex从安装到使用中遇到的问题（文档不断在完善，目标是将所有vuex情况记录下来方便回顾）

一、vuex是什么？---是仓库

官网给的解释是：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。官网的解释确实很难让人明白（好吧我是真的不明白）。

但是这里有一句话：如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

附上官网链接：Vuex 是什么？ | Vuex

二、安装vuex

方法1：创建项目时候vue脚手架会提示选择vuex，勾选上后项目自动创建vuex。

 项目中会生成一个store文件，这个文件就是仓库文件

 方法2：

npm安装

npm install vuex@next --save

yarn安装

yarn add vuex@next --save

三、配置vuex

1.首先需要在项目main.js中引入并通过vue实例挂载

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

2.在项目中src文件夹中创建store文件，并在里面创建index.js（如果有更多模块，可以在store文件夹中创建modules文件分模块创建小仓库）引入vue和vuex，在vue中使用vuex仓库：Vue.use(Vuex)

接下来new一个vuex实例，并调用vuex中store()方法，此方法中以对象作为参数，这个对象则是我们的大仓库。这里面有五大核心属性：state、getters、mutations、actions、modules，

state：数据存放位置--对比data理解

getters：对数据加工处理形成新的数据--对比计算属性computed理解

mutations：修改state里面的数据的唯一途径--修改state数据在这里面

actions：进行异步操作--如发请求

modules：模块化--仓库里面的小仓库（小仓库里面也有state、getters、mutation、action、modules）

四、使用仓库

1.state的使用

直接定义需要的数据即可，如：

state: {
    tableData: [],
  },

2.actions的使用

以发送异步请求为例：函数getGoodsListApi第一个参数context（必须包含），需要用到context中的commit方法，将异步请求成功数据通过context.commit('setGoodsList', res.data.data)  “交给”mutations给到state里面（刚才提到mutations是修改state数据的唯一途径）

这里需要注意：context.commit（A, B）有两个参数，参数A是mutations中修改函数的名称，参数B是需要传输给state的数据，此时此刻，压力给到了mutations~~

  actions: {
    // 产品列表接口
    async getGoodsListApi(context, params) {
      try {
        const res = await api.getGoodsList(params)
        if (res.status === 200) {
          context.commit('setGoodsList', res.data.data)
        }
      } catch (error) {
        console.log(error)
      }
    },
  },

3.mutations的使用

  mutations: {
    setGoodsList(state, data) {
      state.tableData = data
    },
  },

setGoodsList是actions中context.commit（'setGoodsList', res.data.data）方法的第一个参数，在actions环节就决定了它叫什么。setGoodsList(state, data)有两个参数，第一个是state（也就是我们的仓库指向），第二个是数据data，通过赋值state.tableData = data，将数据赋值给state中已经定义好的tableData。mutations的任务完成！

简单梳理一下三者关系：

4. getters的使用

可理解为computed计算属性，对state数据二次加工便于组件使用

const store = new Vuex.Store({
   state:{
       list: [5,74,8,5,2,8,4,5,2,5]
       } ,
    getters: {
        getNumber: state => {
            retrun state.list.filter(item => item > 5)
        }
    }   
})

5. modules的使用

如果模块比较大，数据多写在一个仓库比较多，不方便后期维护或者管理，可将仓库分模块进行管理，这里需要用到modules。如下：将子仓库goodsList引入到store/index.js中，放入modules：{}中，实现模块化。

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 子模块仓库
import goodsList from './moodules/goodsManagement/goodsList' // 产品管理-产品列表中的表格
export default new Vuex.Store({
  modules: { // 子模块
    goodsList
  }
})

 四、如何使用仓库中的内容

注意：使用方法2需要在文件中引入 import { mapState， mapMutations，mapActions，mapGetters } from 'vuex';

1.文件中使用state

        方法1：this.$store.state.数据名

        方法2：...mapState(['数据名'])

如果是访问模块里面的state数据，如下：

        方法1：this.$store.state.模块名.数据名

  // 在当前文件中引入子模块goodsList中的三个数据'currentPage', 'pageSize', 'total'，并使用。
  computed: {
    ...mapState('goodsList', ['currentPage', 'pageSize', 'total']),
  },

// html代码引用
<el-pagination
   layout="total, prev, pager, next, jumper"
   @current-change="handleCurrentChange"
   :current-page="currentPage"
   :page-size="pageSize"
   :total="total"
 ></el-pagination>

        方法2：...mapState('模块名',['数据名'])

2.文件中使用actions

        方法1：this.$store.dispatch.方法名

        方法2：...mapActions(['方法名'])

如果是访问模块里面的actions方法，如下：

        方法1：this.$store.dispatch('模块名/方法名', 参数)

methods: {
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.$store.dispatch('goodsList/getGoodsListApi', val)
    },
  },

        方法2：...mapActions('模块名',['方法名'])

3.文件中使用mutations

        方法1：this.$store.commit("方法名",参数)

        方法2：...mapMutations(['addcount'])

如果是访问模块里面的mutations方法，如下：

        方法1：this.$store.commit("模块名/方法名",参数)

        方法2：...mapMutations('模块名',['方法名'])

4.文件中使用getters

        方法1：this.$store.getters.方法名

        方法2：...mapGetters(['方法名'])

如果是访问模块里面的getters方法，如下：

        方法1：this.$store.getters.模块名.方法名

        方法2：...mapGetters('模块名',['方法名'])