Vuex状态管理store
- 一、Vuex的安装与配置
- 二、store使用方法
- 1、基础使用
- 2、提交变更
- 3、getters使用
- 4、在其他页面（组件）中显示
- 5、modules多模块
做vue项目的时候， store状态管理器可以帮助我们完成一些数据的存储和管理，通俗理解是存储在store里的都是全局变量，可以通过方法提交更新，其他页面和组件也会同步更新，拿到最新的值。
一、Vuex的安装与配置
| 方法 | 描述 |
|---|---|
| state | 状态树：定义需要管理的数组、对象、字符 |
| getters | 类似计算属性，当需要从store的state中派生出一些状态，就需要使用getter，getter会接受state作为第一个参数，而getter的返回值会根据它的依赖缓存起来，只有getter中的依赖值发生改变才回重新计算。 |
| mutation | 更改store中state状态的唯一方法就是提交mutation。每个mutation都有一个字符串类型的事件和一个回调函数，我们需要改变state的值就要在回调函数中改变。我们要执行这个回调函数，那么我们需要执行一个相应的调用方法：store.commit |
- Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到更新。
- 不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交（commit）mutation。
- 安装vuex支持
npm install vuex --save
注意：
Vue 3 匹配 Vuex 4npm install vuex@4 --saveVue 2 匹配 Vuex 3
npm install vuex@3 --save卸载vuex
npm uninstall vuex --save
- 在src下创建store文件夹，建立
store/index.js--> 在index.js中引入vue 和 vuex- 引入vue 和 vuex，并使用
Vue.use(Vuex)【☆☆☆☆☆】 - 创建state和mutations
- export导出Vuex.Store 实例
- 引入vue 和 vuex，并使用
初始代码
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
})
- 在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多模块
-
在store下创建文件夹 module ，并建立两个文件 moduleA.js moduleB.js
-
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: {}
})
- 在store.js中创建modules并导出
- 代码示例
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的用法就介绍到这啦~~
