项目中使用vuex

 

       1. 为什么要使用vuex ，以及什么情况下使用vuex 呢？试想一下当你的vue中data 中有大量的字段，各个组件之间的传值，以及共用的状态属性，当这些东西越来越多时就会在个人开发或者多人协作时提高难度，此时我们就需要引用vuex 来进行管理，什么样的项目适合使用呢，中大型项目使用的价值肯定是相对较高的，如果你的项目只有简单的两三个页面，就可以着情的使用。往小了说，vuex 可以对项目中的一些data 属性状态进行统一管理，往大点说使用vuex 可以使 你的vue 代码更好的做好业务和数据的分离，vue中用来展示业务逻辑，vuex 负责数据的处理，以及后续的回传，分工更加明确，维护也更加方便。安装就不说了，可以在官网上看一下


2.vuex 组成部分 

        vuex 有5个核心组成部分分别是

        （1）state:存放状态属性；（2）mutations：操作state 中的属性
        （3） getters ：加工state 中的属性给外界 ；（4）actions：存放异步方法，可以提交mutations ；(5) modules:状态模块化

3.开始使用vuex
        首先在你的src 文件夹下新建一个store 文件夹
        

index.js 用来创建vuex，modules为根据业务场景所区分的模块，我是根据页面分成了两个模块；

index 中的代码：
 

import Vue from 'vue'
import Vuex from 'vuex'
import {SET_NUMBER} from '../constant/mutation-types'
import table from './modules/table'
import index from './modules/index'


Vue.use(Vuex)

export default new Vuex.Store({
modules:{
  table,
  index
}
})

modules下就是你的单个模块

打开src 下的main.js,我们需要引用store
 

import store from './store’



new Vue({
  router,
  store,
  data() {
    return {
      media_options: media_options,
      use_options: use_options,
      booleaan_options: booleaan_options,
      contacts_options: contacts_options,
      index_media_options:index_media_options
    }
  },
  render: h => h(App)
}).$mount('#app')

此时我们需要会过头来看下我们的模块js,我就单拿一个例子table.js 讲

 

const state = () => ({
  
})

const getters = {


}

const mutations = {

}

const actions = {
}

export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations

}

需要注意一下的是因为我项目里有多个module,所以为了区分每个module我用了namespaced为true，意味着每次操作我需要吧module 的路径都带上

现在我们可以在页面中去使用了，举个例子

    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30]"
            :page-size="20"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalPage"
          >
          </el-pagination>

在没用使用vuex 之前这个totalpage 我们一般都会在data中定义一个变量。

当我们引用了vuex 之后我们可以把这个属性定义在刚才的state中，

然后在vue 中去观察这个属性
 

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

当totalPage这个值发生变化时，会直接渲染到页面上，当我们有多个属性需要观察时，我们可以引入

当一个vue 页面中data 里有多个属性的时候我们可以使用mapState这个辅助函数，
 

import { mapState } from "vuex";

  computed: {
    ...mapState("table", [
      "totalPage",
      "haveUse",
      "unUse",
      "tableData",
      "talent_options",
      "talent_list",
      "model_info",
      "isShowEditDialog"
    ])
  },

千万要记住如果你用了namespaced 为true ，mapstate 第一个参数就是你的module的名字

如果此时你想手动更改totalPage 的值，可以在mutations 中进行声明
 

const mutations = {
  /**
   *更新单条达人信息
   * @param {*} state
   * @param {*} info
   */
  updateModelInfo:(state, info) => {

    state.totalPage= info.num
  },

}

this.$store.commit(’table/updateModelInfo’,{
    num:10
})

我们需要使用commit 提交，提交的时候也别忘了加上module 路径，

这个项目中我没用到getters 因为没有涉及到一些数据的操作，getters 的使用也很简单
 

 state:{
  
     todos:[{
       id:1,
       done:true
     },{
       id:2,
       done:false
     }]
   },

const getters = {
     doneTodosCount:(state,getters)=>{
        return getters.doneTodos.length
       },

}

引入mapGetters 辅助函数

import { mapGetters } from 'vuex'

 computed:{
       ...mapGetters([
         'doneTodosCount'
       ])
   },

                

在项目中我们去请求网络获取的数据的时候，我们的逻辑最好封装在actions 里面，actions 和mutations 最大的区别就是actions提交的是 mutation，而不是直接变更状态，action 可以包含任意异步操作,而mutations只能使用同步方法，不是因为语法不支持，而是如果在mutations中使用异步方法一些前后状态的变化无法追踪，特别是多次的mutations 。

比如我请求一个接口在table.js 里面引入你的网络请求接口
 

import {
  getTableList,
  getTypeList,
  uploadFile,
  deleteInfo,
  updateInfo
} from "../../axios/api/table";

 getTypeList({ state }) {
    getTypeList({}).then(res => {
      var typeList = [];
      res.data.map((item, index) => {
        let typeInfo = {
          value: item,
          label: item
        };
        typeList.push(typeInfo);
      });

      (() => {
        typeList.push({
          value: "",
          label: "无"
        })
      })(Object.assign(state.talent_list, typeList))


      state.talent_options = typeList;
    });
  },

这是封装在actions 里的一个网络请求，我这里是直接把state里的talent_options赋值了，你也可以在muta tions 里声明一个方法，在网络请求成功后用commit （'xxxx'）直接提交，

我们需要通过分发来调用方法
 

this.$store.dispatch(’table/getTypeList’,params)

这里一定要注意加上table 路径

如果我们在访问网络请求后需要把状态回调给vue，我们可以直接用promise

 

  changeExpect(_,params){
  return new Promise((resolve,reject)=>{
    changeExpect(params).then((res) => {
      console.log(res);
      if (res.code == 0) {
        v.$message({
          type: "success",
          message: "更改成功!",
          duration:1000
        });

        resolve()

      }
    });
  })
  },

在外层的调用可以直接改为
 

 this.$store.dispatch('index/changeExpect',params).then(()=>{
           
      })

另外如果你想在module 里引用一些element-ui 的话（前提是你安装了），需要table.js重新新建一个vue
 

import Vue from 'vue';
let v = new Vue();