在vue中使用vuex详解

下载vuex

npm install vuex --save

新建store文件夹，主文件index.js引入vue，vuex。

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store();
 
export default store;

在vue的main.js中引入store并全局注入

import store from './store'//引入store
 
new Vue({
  el: '#app',
  router,
  store,//使用store
  template: '<App/>',
  components: { App }
})

vuex各个模块介绍

state：用于数据的存储，是store中的唯一数据源
getters：如vue中的计算属性一样，基于state数据的二次包装，常用于数据的筛选和多个数据的相关性计算
mutations：类似函数，改变state数据的唯一途径，且不能用于处理异步事件
actions：类似于mutation，用于提交mutation来改变状态，而不直接变更状态，可以包含任意异步操作
modules：类似于命名空间，用于项目中将各个模块的状态分开定义和操作，便于维护

简单实例

import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
	state:{
	 	count:0
	},
	getters:{
		getCount:state => {
			return state.count;
		}
	},
	actions:{ //触发更改state中的数据，支持异步操作
		setCount(context,data){
			context.commit('addCount',data)
		}
	},
	mutations:{//唯一支持修改state中的数据，仅支持同步操作
		addCount(state,data){
			state.count += data;
		}
	}
});
 
export default store

如何使用

//取数据
this.$store.state.count
//通过使用mapState、mapGetters辅助函数
<script>
 import {mapState} from "vuex";
 
 export default {
  computed: mapState([ // 数组
   "count"
  ])
 }
</script>



//存数据
//dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch('actions方法名',值)

//commit：同步操作，写法：this.$store.commit('mutations方法名',值)

注

当项目较大时，可以将vuex分模块开发