Vue中vuex的五个属性和基本方法

vuex是什么

vuex官方解释
vuex是一个专为vue.js应用程序开发的状态管理模式+库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

如何使用vuex

1:当我们在搭建项目的时候 npm init：会引导你建立一个package.json文件，包括名称、版本、作者等信息。
我们在可以直接选择勾选vuex，创建完项目，项目中会有vuex的引用和对应store文件夹和store下的文件。
2：如果搭建的项目没有勾选vuex,我们可以使用npm install vuex
在main.js文件中引入vuex中的store,挂在vue上。对应store文件和store文件夹下自己生成index.js文件。

store文件夹下index.js如果配置，在main.js引入

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
export default new Vuex.Store({
  //数据，相当于data
  state: {
    
  },
  getters: {
    
  },
  //里面定义方法，操作state方发
  mutations: {
    
  },
  // 操作异步操作mutation
  actions: {
    
  },
  modules: {
    
  },
})

Vuex的五个属性和基本用法

store getters mutations actions modules

store:vuex基本数据，用来存储变量，对象。状态管理的数据。
getters：从基本数据派生的数据（state），用来获取数据。相当于组件中的computer(计算属性) this.$store.getters.xxxx

actions:用来操作数据，可以进行异步操作,不能直接修改state,执行的时候，出发mutations中的方法，让mutations去同步操作，去修改state中的数据。 this.$store.dispatch(“方法”，value)

actions: {
		increame:(context,value){
		settimeout(（）=>{
			context.commit("SET_EXTERNALDATA ",value)
		},1000)
		}
	}

	actions: {
		increame:(context,value){
			return new Promise((reslove)=>{
				settimeout(（）=>{
					context.commit("SET_EXTERNALDATA ",value)
					reslove();
				},1000)
				}
		})	
	},
	methods:{
		increme(){
			this.$store.dispatch('increame','zhangsan').then(res=>{
				console.log('完成更新后的操作')
			})
		}
	}

mutations: 用来直接修改state中的数据。同步执行。this.$store.commit(“方法”,value)；

mutations: {
		SET_EXTERNALDATA :(state, value) => {
			state.externalData = value
		},
		SET_DEBITCARD: (state, value) => {
			state.debitCardData = value
		},
}

modules:状态管理的模块化。可以让每一个模块拥有自己的 state、mutation、action、 getters，使得结构非常清晰，方便管理。当使用的大型的项目的时候，可以使用modules来处理。

vuex中五个属性的方法的另一种获取形式，对应多个数据的操作相对试比较便捷

按需引入 mapstate
import { mapState } from “vuex”;
getters： 计算属性中使用：获取到的变量，对象可以直接在标签内使用，相当于组件内data增加accountHome，accountObject

computed:{
		...mapState(['accountHome','accountObject'])
	}

import { mapMutations,mapActions} from “vuex”;
在方法内使用，相当于增加对应的方法。

methods:{
		...mapMutations(['SET_LIFELIST','SET_AMUSEACTIVITIES'])
		...mapActions(['increame','deincreme'])
		btn(){
		   this.SET_CARDDETAILS('张三');// 执行方法传参
		};
		btn1(){
			this.increame()  // 直接执行未传参修改值
		}
	},