Vuex

---

一、Vuex是什么？

Vuex可以简单理解为保存项目中常用数据（比如用户名等）的工具。

二、使用步骤

1.引入Vuex

一般在main.js中写入以下代码。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
  //写入你要保存的数据，比如count,user
    count: 1,
	user: {
		userName: 'wangwu',
		userPwd: '123123'
	}
    
  },

//mutations可以简单理解为改变state中数据的方法，类似于组件中的method：{}
  mutations: {

    //这个就是具体的方法，作用是将count的值加一，increment是函数名可以自己命名，state是传入的参数，就是上面的state,一般都是要写的
    increment (state) {
      state.count++
    },

    //user是自定义参数
	getUser(state, user){
	  state.user = user;
	}
  }
})
export default store;

new Vue({
	el: '#app',
	router,
	store: store,
	components: {App},
	template: '<App/>'
});

2.从Vuex中读取数据

在需要使用Vuex中的组件写入以下代码

<script>
export default {
	name: 'HelloWorld',
	//可以使用计算属性拿Vuex中的属性
	computed: {
		count () {
			return this.$store.state.count;
		},
		user() {
			return this.$store.state.user;
		}
	},
	methods: {
		listTest() {
			console.log(this.count);
			console.log(this.user);
		}
	},
	created() {
		this.listTest();
	}
};

</script>

---

3.改变Vuex的数据

在需要使用Vuex中的组件写入以下代码

<script>
//引入mapMutations，mapMutations可以简单理解为对mutations做了一定处理，让我们可以直接使用其中的方法。
import {mapMutations} from 'vuex';

export default {
	name: 'UserLogin',
	data() {
		return {
			user: {
				username: 'zhangsan',
				userPwd: '123456'
			}
		};
	},
	methods: {
        //...是展开函数
		...mapMutations([
		    //获得mutations中setUser()
			'setUser'
		]),
	},
	created() {
		this.setUser(this.user);
	}
};
</script>

可以看到wangwu变成了zhangsan说明修改成功。

总结

提本文仅仅简单介绍了Vuex的使用，其他可以参考[Vuex官方文档]。(https://vuex.vuejs.org/zh/guide/)