Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。直白的说就是解决组件间数据共享和数据持久化的问题。
使用：
1.新建vuex的文件夹（src下面vuex）
2.vuex下新建store.js
在store.js里面使用
3.安装vuex:cnpm install vuex --save
4.在store.js里面引入vuex和vuex并use vuex
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex );
（1）定义state在vuex中用于存储数据
var state={
count:1
}
（2）定义mutations里面放方法，主要用于改变state里面的数据
var mutations={
incCount(state){
++stata.count;
}
}
/*getters不一定用的上具体情况具体分析，getter类似于计算属性，改变state里面数据的时候会触发getters里面的方法获取新的值*/
(3)var getters={
computedCount(state){
return state.count*2;
}
}
/*action里面提交的是mutations，而不是直接变更状态，action可以包含任意异步操作*/
(3)var actions={
incMutationsCount(content){//conent.commit提交一个mutations
content.commit("incCount")//执行mutations里面的方法 ，同时组件里面要通过this.$store.dispatch来代用action里面的方法
}
}
(4).实例化vuex Store对象并暴露出去,核心对象一定要暴露
const store=new Vuex.Store({
state,
mutations，
getters,
actions
})
export default store;
5.其他组件里面要使用vuex需要引入export default 的store
import store from "store的路径"
6.在组件中进行注册（与data平级）的位置
<template>
<div>{{this.$store.state.count}}</div>//模板中直接使用store里面的数据
<div>{{this.$store.getters.computedCount}}</div>
<br>
<button @click="addCount()">增加数据</button>
</template>
<script>
export default {
data(){
//数据
}，
store， //注册
methods:{
addCount(){
//改变store里面的数据
//触发mutation里面的方法
//this.$store.commit('incCount')
this.$store.dispatch('incMutationsCount')//触发action里面的方法要用dispatch
}
}
}
</script>
以上是vuex的基本使用
由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：
举个项目中的例子：
（1）我们先写好后台接口文件userExtra.js专门放到一个api/group文件夹下面进行管理
import axios from "axios";
import { httpUrl } from "../../components/http_url/http_url";
let host = httpUrl.host;
const api = function (token) {
return {
/**
* 1.超级用户列表
* App\Http\Controllers\Api\v1\UserExtraControler@index
* @param {Object} data - 数据
* @param {string} data.eid - 加密id
**/
async userExtraGet({ eid }) {
return await axios.get(host + "/api/v1/userExtra", {
params: { eid },
headers: {
"Authorization": "Bearer " + token
}
})
},
}
}
export default api（2）在store下面进行模块化管理，新建modules文件夹，里面放对应的功能模块。如下面的目录结构：以下代码要根据具体的业务逻辑而定。
/*引入api下面获取数据的接口文件*/
import userExtra from '../../api/group/userExtra'
const state = {
userExtraList:[]
}
// actions
const actions = {
async getUserExtra({ commit, state,rootState }) {
console.log("rootState:");
let token=(rootState.user.token);
let res = await userExtra(token).userExtraGet();//调用接口文件里面的方法获取真实的数据。
commit('setUserExtra', res.data.data);
},
}
// mutations
const mutations = {
setUserExtra(state, userExtraList) {
state.userExtraList = userExtraList;
}
}
/*对外暴露核心对象*/
export default {
namespaced: true,
state,
actions,
mutations
}
（3）在使用到vuex store里面数据的组件里面直接引入
import {mapGetters, mapActions, mapState, mapMutations} from 'vuex'
import userExtra from "引入modules下面对应的模块";
mounted() {
var _this=this;
if (this.token == null && this.token == undefined) {
this.$router.push({
name: "login"
})
} else {
this.setToken(this.token);
this.getUserExtra();
}
}，
computed:{
...mapState('userExtra',['userExtraList']),
...mapState({
userExtraList1: state => state.userExtra.userExtraList,
})
},
methods:{
...mapActions('userExtra', ['getUserExtra']),
...mapMutations('userExtra', ['setToken']),
}还有个问题就是不同他模块里面获取state需要rootState.模块名称。其他的用到了之后具体研究。