vuex的简单安装和使用（附vuex使用总结和详解）

版权声明：本文为博主原创文章，未经博主允许不得转载 https://blog.csdn.net/AiHuanhuan110/article/details/89185816

Vue 的状态管理工具 Vuex

安装

# 安装vuex
npm install vuex --save

使用

在 src 目录下新建文件夹 store，再在新建文件夹下新建 index.js 文件，这个文件我们用来写一些模块并导出 store 的文件，代码示例：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

export default new Vuex.Store({
	state: {
		loginStatus: 0, //登录状态 0未登录 1已登陆
        // ...
	},
	mutations: {
		setLoginStatus(state, payload) {
			state.loginStatus = payload;
		},
		setAuthId(state, payload) {
			state.authId = payload;
		},
		setAuthToken(state, payload) {
			state.authToken = payload;
		}
	},
	// ...
});

在main.js文件中使用：

import store from './store'
// ...

router.beforeEach((to, from, next) => {
  const params = Vue.prototype.$util.URLParam();
  const {auth_id, user_token} = params;
  if (auth_id && user_token) {
      store.commit('setLoginStatus', '1');
      store.commit('setAuthId', params.auth_id);
      store.commit('setAuthToken', params.user_token);
  }
    // ... 
}

在 vue 组件中使用：

watch:{
    loginStatus() {
        if(this.loginStatus == '1'){
            this.$store.dispatch('getAuthId')
            this.$store.dispatch('getAuthToken')
        }else{
            // this.$store.commit('setAuthId','')
            // this.$store.commit('setAuthToken','')
        }
    }
}

computed:{
    auth_id(){
        return this.$store.state.authId
    },
    user_token(){
        return this.$store.state.authToken
    }
}

附：

• Vuex使用总结（详解）