一篇搞定Vuex

1.简介

　　首先，你必须明显明白vuex到底是干啥的，主要解决开发中的哪些问题？

　　Vuex是一个专门为Vue.js应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式变化

　　说白了，就是：提供了那么一个公共存储的地方，存放各个组件的数据，组件访问数据和操作数据访问这个地方即可

　　所以，Vuex主要解决是组件间数据传递问题，尤其是嵌套组件，项目一大时，父子组件间的数据传递就非常麻烦了，而Vuex则提供了一种集中管理组件数据的方案，当然小型项目就没必要用Vuex了

2.Demo准备

• vue init webpack-simple vuex-demo
• cd vuex-demo
• npm install
• npm install vuex -S

3.访问store对象的两种方式　　

　　Vuex的核心是Store(仓库)，相当于是一个容器，一个store实例中包含以下属性的方法：

• state　　定义属性（状态、数据）
• getters　　用来获取属性
• actions　　定义方法（动作）
• commit　　提交变化，修改数据的唯一方式就是显式的提交mutations
• mutations　　定义变化

　　注：不能直接修改数据，必须显式提交变化，目的是为了追踪到状态的变化

　　创建store.js文件，在main.js中导入并配置store.选项

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

Vue.use(Vuex);

//定义属性(数据)
var state = {
  count: 6
}

//创建store对象
const store = new Vuex.Store({
  state,
})

//导出store对象
export default store;

import Vue from 'vue'
import App from './App.vue'

import store from './store.js'  //导入store对象

new Vue({
  store,
  el: '#app',
  render: h => h(App)
})

　

　　方式一：通过this.$store访问

  //方式1：通过this.$store访问
  computed: {
    count() {
      return this.$store.state.count;
    }
  }

　　方式二：通过mapState、mapGetters、mapActions访问，vuex提供了两个方法

• mapState　　获取state
• mapGetters　　获取getters
• mapActions　　获取actions

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

Vue.use(Vuex);

//定义属性(数据)
var state = {
  count: 6
}

//定义getters
var getters = {
  count(state) {
    return state.count;
  }
}

//定义actions,要执行的操作，如流程判断、异步请求
const actions = {
  increment(context) { //包含 commit dispatch state
    context.commit('increment');
  },
  decrement(context) {
    if (context.state.count > 10) {
      context.commit('decrement');
    }
  }
}

//定义mutations,处理状态（数据）的改变
const mutations = {
  increment(state) {
    state.count++;
  },
  decrement(state) {
    state.count--;
  }
}

//创建store对象
const store = new Vuex.Store({
  state,
  getters,
  actions,
  mutations,
})

//导出store对象
export default store;

<template>
  <div id="app">
    <button @click="increment">增加</button>
    <button @click="decrement">减小</button>
    <p>当前数字为：{{count}}</p>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex";

export default {
  name: "app",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  //方式1：通过this.$store访问
  /*computed: {
    count() {
      return this.$store.state.count;
    }
  }*/

  /*computed:mapState([
    'count'
  ])*/

  computed: mapGetters(["count"]),
  methods:mapActions([
    'increment',
    'decrement',
  ])
};
</script>

<style>
</style>

　　

分模块组织Vuex

　　上面那种方式，所有的都写在一个文件，项目大时，难免看起来显乱，所以需要分模块来组织，原则上就私有和公共的分开进行组织

　　其中modules存放每个模块的，actions.js，getters.js，mutations.js存放公共的，目录如下

user.js

/**
 * 用户模块
 */

import types from '../types.js'

 const state={
 	count:6
 }

var getters={
	count(state){
		return state.count;
	}
}

const actions = {
	increment({commit,state}){
		commit(types.INCREMENT); //提交一个名为increment的变化，名称可自定义，可以认为是类型名
	},
	decrement({commit,state}){
		if(state.count>10){
			commit(types.DECREMENT);
		}
	}
}

const mutations={
	[types.INCREMENT](state){
		state.count++;
	},
	[types.DECREMENT](state){
		state.count--;
	}
}

export default {
	state,
	getters,
	actions,
	mutations
}

　　

actions.js

import types from './types.js'

const actions={
	incrementAsync({commit,state}){
		//异步操作
		var p=new Promise((resolve,reject) => {
			setTimeout(() => {
				resolve();
			},3000);
		});

		p.then(() => {
			commit(types.INCREMENT);
		}).catch(() => {
			console.log('异步操作');
		});
	}
}

export default actions;

　　

getters.js

const getters={
	isEvenOrOdd(state){
		return state.user.count%2==0?'偶数':'奇数';
	}
}

export default getters;

　　

types.js

/**
 * 定义类型常量
 */

const INCREMENT='INCREMENT'
const DECREMENT='DECREMENT'

export default {
	INCREMENT,
	DECREMENT
}

　　

index.js

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

Vue.use(Vuex);

import getters from './getters.js'
import actions from './actions.js'
import user from './modules/user.js'

export default new Vuex.Store({
	getters,
	actions,
	modules:{
		user
	}
});

　　

main.js

import Vue from 'vue'
import App from './App.vue'

import store from './store/index.js'

new Vue({
  store,
  el: '#app',
  render: h => h(App)
})

分模块组织的访问

        console.log(this.$store);
        console.log(this.$store.getters['dirTestcaseData']);
        console.log(this.$store.getters['user/count']);

        console.log(this.$store.state['project']);
        console.log(this.$store.state.user['count']);

        this.$store.dispatch("asset/changeCurrentFundIndex", index);
        this.$store.dispatch('increment');

//导入
import { mapState, mapGetters } from "vuex";

//批量引入
    ...mapGetters("asset", {
      assetDetailType: "assetDetailType",
      tradeSelectVal: "tradeSelectVal",
      totalAsset: "totalAsset"
    })  //也支持数组