做vue项目的时候， store状态管理器可以帮助我们完成一些数据的存储和管理，通俗理解是存储在store里的都是全局变量，可以通过方法提交更新，其他页面和组件也会同步更新，拿到最新的值。

一、Vuex的安装与配置

方法	描述
state	状态树：定义需要管理的数组、对象、字符
getters	类似计算属性，当需要从store的state中派生出一些状态，就需要使用getter，getter会接受state作为第一个参数，而getter的返回值会根据它的依赖缓存起来，只有getter中的依赖值发生改变才回重新计算。
mutation	更改store中state状态的唯一方法就是提交mutation。每个mutation都有一个字符串类型的事件和一个回调函数，我们需要改变state的值就要在回调函数中改变。我们要执行这个回调函数，那么我们需要执行一个相应的调用方法：store.commit

1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到更新。
2. 不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交（commit）mutation。

1. 安装vuex支持

npm install vuex --save

注意：
Vue 3 匹配 Vuex 4

npm install vuex@4 --save

Vue 2 匹配 Vuex 3

npm install vuex@3 --save

卸载vuex

npm uninstall vuex --save

2. 在src下创建store文件夹，建立store/index.js --> 在 index.js 中引入vue 和 vuex
   • 引入vue 和 vuex，并使用 Vue.use(Vuex) 【☆☆☆☆☆】
   • 创建state和mutations
   • export导出Vuex.Store 实例

初始代码

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
  username: '牛牛',
}
const mutations = {
  setUser(state, name) {
    state.username = name
  },
}
export default new Vuex.Store({
  state,
  mutations
})

3. 在main.js配置，这样就可以全局引入了，省的每个要使用的页面单独在引入。

import Vue from 'vue'
import App from './App.vue'

import VueRouter from 'vue-router';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router/index.js';
import axios from 'axios';

import './mock/index.js';
import '@/assets/css/global.css';
import store from './store/index.js';

Vue.config.productionTip = false;
Vue.prototype.$axios =axios;
Vue.use(ElementUI);
Vue.use(VueRouter);

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

二、store使用方法

1、基础使用

语法：$store.state.XXX（XXX属性名）

页面代码，我是以Main2.vue作为基础操作的

<template>
  <div>
    <span>这是Main2</span><br /><br />
    <h1>{{ $store.state.username }}</h1>
  </div>
</template>

<script>
export default {
  name: "Main2",
};
</script>

<style scoped>
</style>

页面效果

2、提交变更

使用方法 commit ，语法如下：

this.$store.commit('提交方法名',数据);

在store.js中一个状态字段 userState 和提交的方法 setUserState

页面代码修改

<template>
  <div>
    <span>这是Main2</span><br /><br />
    <h1>{{ $store.state.username }}</h1>
    <br />
    数据状态：{{ $store.state.userState }}
    <el-button @click="addState">状态+1</el-button>
  </div>
</template>

<script>
export default {
  name: "Main2",
  methods: {
    addState() {
      this.$store.commit("setUserState", 1);
    },
  },
};
</script>

<style scoped>
h1,
.el-button {
  height: auto;
}
</style>

页面效果

3、getters使用

对数据进行修饰，比如上例中的用户状态，我们假设如下：
0 ：无效
1 ：1级
2 ：2级
…

在 store/index.js 增加getters进行数据的修饰并导出getters，全部代码如下：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
  username: '牛牛',
  userState: 0
}
const mutations = {
  setUser(state, name) {
    state.username = name
  },
  setUserState(state, data) {
    state.userState += data
  },
}
const getters = {
  getUserState(state) {
    let data;
    if (state.userState == 0) {
      data = '无效'
    } else {
      data = state.userState + '级'
    }
    return data;
  }
}

export default new Vuex.Store({
  state,
  mutations,
  getters
})

页面代码修改

页面效果

4、在其他页面（组件）中显示

直接在footer 页面加入显示即可
数据状态：{{$store.state.userState}}

<template>
  <div>store/index.js 来的数据：{{ $store.state.userState }}</div>
</template>

<script>
export default {
  name: "Footer",
};
</script>

<style scoped>
</style>

更新state中的状态时都会同步更新：

5、modules多模块

1. 在store下创建文件夹 module ，并建立两个文件 moduleA.js moduleB.js
   

2. moduleA.js 定义state 的username 为 module_a_user，同理，moduleB.js为 module_b_user

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    username: "module_a_user"
  },
  mutations: {},
  getters: {}
})

3. 在store.js中创建modules并导出
   
4. 代码示例

import Vue from 'vue'
import Vuex from 'vuex'
import moduleA from './module/moduleA.js';
import moduleB from './module/moduleB.js';

Vue.use(Vuex)

const state = {
  username: '牛牛',
  userState: 0
}
const mutations = {
  setUser(state, name) {
    state.username = name
  },
  setUserState(state, data) {
    state.userState += data
  },
}
const getters = {
  getUserState(state) {
    let data;
    if (state.userState == 0) {
      data = '无效'
    } else {
      data = state.userState + '级'
    }
    return data;
  }
}

const modules = {
  a:moduleA,
  b:moduleB
}

export default new Vuex.Store({
  state,
  mutations,
  getters,
  modules
})

页面使用：
语法：$store.state.模块名.字段名

module用户a：{{$store.state.a.username}}
<br>
module用户b：{{$store.state.b.username}}

页面效果

操作全部代码，仅供参考

Main2.vue参考代码

<template>
  <div>
    <span>这是Main2</span><br /><br />
    <h1>{{ $store.state.username }}</h1>
    <br />
    数据状态：{{ $store.state.userState }}
    <el-button @click="addState">状态+1</el-button>
    <br /><br />
    计算数据状态：{{ $store.getters.getUserState }}
    <br /><br />
    module用户a：{{ $store.state.a.username }}
    <br />
    module用户b：{{ $store.state.b.username }}
  </div>
</template>

<script>
export default {
  name: "Main2",
  methods: {
    addState() {
      this.$store.commit("setUserState", 1);
    },
  },
};
</script>

<style scoped>
h1,
.el-button {
  height: auto;
}
</style>

store/index.js代码在5.4小节中已经全部提供，往上翻一下
store/module/moduleA.js代码在5.2小节中已经全部提供，往上翻一下

---

Vuex状态管理store的用法就介绍到这啦~~