vue中的状态管理（全局变量）-vuex

2021-09-17

vuex是一个状态管理插件，理解开来就是vue中的全局变量，非常轻量级，但是需要注意的是刷新以后就清除了，所以很多东西在vuex中还要注意在缓存中存储。
首先我们主要了解一个vuex的主要属性
核心仓库是store（state,mutations,actions,getter,modules）。

action 提交mutation,而不是直接更改状态
action 可以包括异步操作，mutation只能同步
modules将store分割成模块（modules）,每个模块拥有自己的(state,mutations,actions,getter); 方便维护
store 改变状态时通过（commit） mutations
getter 全局获取
mutations ：改变store中变量的唯一方法

废话不多说，我们来看看vuex的使用情况：
一：首先我们需要安装vuex

npm install vuex --save

二：我们需要在src目录下新建一个store文件夹，并且新建一个index.js的文件

import Vuefrom 'vue';
import Vuexfrom 'vuex';
import app from './modules/app';
import user from './modules/user';
import permission from './modules/permission';
import getters from './getters';
Vue.use(Vuex);
const store =new Vuex.Store({
modules: {
user
},
getters
});
export default store

这里我们用引入模块的方式来进行数据操作。
同时我们在store文件夹中新建一个module的文件夹，并且新建一个user.js

vue中的状态管理（全局变量）-vuex

文章图片
在user中我们写一个获取token的方法
首先我们定义一下token

const user = {
state: {
token：‘’
}
}
export default user;

然后我们写一个方法来赋值token，这个方法必须要写在mutations中

mutations: {
SET_TOKEN: (state, token) => {
state.token = token;
}
}

我们写一个外部方法，可以让外部调用修改token

actions: {
SaveToken({
commit
}, token) {
commit('SET_TOKEN',token);
}
}

在提交mutations修改store的时候可以用commit同步提交，也可以用dispatch异步提交
这样我们就把token保存在里store中
三：为了方便获取，我们来重写一个getters
在store文件夹中新建一个getters.js，将token写进去

const getters = {
token: state => state.user.token
};
export default getters

四：我们需要在main.js中引入vuex

import store from './store';
//实例化 store
new Vue({
el: '#app',
store,
router,
template: '',
【vue中的状态管理（全局变量）-vuex】components: { App }
})

五：在页面中保存token
只需要在别的页面中调用

this.$store.dispatch('SaveToken',“token”).then((res) => {
}

res是如果有回调的数据，可以在vuex中

vue中的状态管理（全局变量）-vuex

文章图片
使用resolve回调，reject是报错回调。
六：保存好了，我们可以进行获取了
在页面中引入getter

import { mapGetters }from 'vuex';

在计算属性中

computed: {
...mapGetters([
'token'
])
}

这样就相当于吧token注册到了data中了，可以随便用了

推荐阅读

上一篇：【姜薪桐】学习是一种快乐

下一篇：顺创案例|顺创案例||企业解雇旷工半天员工被判合法