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
在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: '',
components: { App }
})
五：在页面中保存token
只需要在别的页面中调用
this.$store.dispatch('SaveToken',“token”).then((res) => {
}
res是如果有回调的数据，可以在vuex中
使用resolve回调，reject是报错回调。
六：保存好了，我们可以进行获取了
在页面中引入getter
import { mapGetters }from 'vuex';
在计算属性中
computed: {
...mapGetters([
'token'
])
}
这样就相当于吧token注册到了data中了，可以随便用了
网友评论