Vue的状态管理Vuex的使用

Vuex的使用方法

• 1.介绍和安装
• 2.state对象
• 3.getters对象
• 4.mutations对象
• 5.actions对象

1.介绍和安装

Vuex： Vuex是Vue.js应用程序的状态管理模式+库。它充当应用程序中所有组件的集中存储，其规则确保状态只能以可预测的方式进行变更。它还与Vue的官方devtools扩展集成，以提供零配置时间旅行调试和状态快照导出/导入等高级功能。
安装： vue项目中执行

npm install vuex --save

//main.js中
import store from './store'；
new Vue({
el: '#app',
router,
store,  //将store添加到根vue实例以便能全局使用
components: { App },
template: '<App/>'
});

接下来将在刚才建好的index.js中正式使用vuex中的对象方法。

2.state对象

设置要全局访问的对象state

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {
isLogin:false,
token:'',
user:''
};

3.getters对象

设置内置属性getters实时监听state值

const getters = {
isLogin(state){
return state.isLogin;
},
token(){
return state.token;
},
user(){
return state.user;
}
};

4.mutations对象

设置内置对象mutations更新state中的值

const mutations = {
setLogin(params){
state.isLogin = params;
},
setToken(params){
state.token = params;
},
setUser(params){
state.user = params;
}
};

5.actions对象

设置内置对象变量actions触发异步操作

const actions = {
setLogin(context,params){
context.commit('setLogin',params)
},
setToken(context,params){
context.commit('setToken',params);
},
setUser(contest,params){
context.commit('setUser',params);
}
};
//最后将各个对象封装在store实例化对象中导出
const store = new Vuex.Store({
state,   //this.$store.state.isLogin   可以获取值
getters,  //相当于vue中computed计算属性 实时监控state  this.$store.getters.isLogin;
mutations,// this.$store.commit('setLogin',params)  可以同步更新值
actions   //this.$store.dispatch('setLogin',params)  可以包含其他异步操作并触发mutations
});

export default store;