vue项目中引入vuex以及vuex简单的使用

vuex安装

npm install --save vuex

安装成功后，可在package.json中看到安装的版本

在store文件夹中的index.js中引入

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

在index.js中创建vuex的store

const store = new Vuex.Store({
    state:{
        Authorization:localStorage.getItem('Authorization') ? localStorage.getItem('Authorization') : '',

    },
    mutations:{
        //第一个是state参数，第二个是usr自定义参数，或称为载荷（payload），也就是我在登录的时候传入的数据
        changeLogin(state,user){
            state.Authorization = user.Authorization;
            localStorage.setItem('Authorization', user.Authorization);
        }
    },
    //异步用到actions
    actions:{

    },
    //通过getters获取数据
    getters:{

    }
});

使用vuex

例如在login.vue中使用vuex

• 首先导入mapMutations

<script>
import { mapMutations } from 'vuex';
    export default {}
</script>

• 在methods中引入store中定义的函数

methods: {
	...mapMutations(['changeLogin']),
}

• 在具体函数中使用引入的函数，例如将当前用户的token存储起来，放到Authorization中

submitLogin() {
	this.axios.post("/dataConversionJS/login", userJson)
		.then(res => {
			let data = res.data;
			if(data.code === 0){
			_this.$message({
			message:'Success!',
			type:'success'
			});
			//获取当前登录的用户信息
			this.loginUser = res.data.message.account;
			//将用户token保存到vuex中
			this.changeLogin({Authorization:res.data.message.token});
		}
}

• 在其他任意一个vue页面中引入mapMutations，即可使用存储起来的token
  例如在navigation.vue中

引入

import { mapMutations } from "vuex";

使用

v-if="this.$store.state.Authorization != ''"

移除元素

Logout() {
      localStorage.removeItem("Authorization");
      this.$store.state.Authorization = '';
      this.$router.push("/login");
}