?
? ? ? ?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();
? ? ? ? ? ?
????????