vueX状态管理

创建全局访问的state对象

const state = {  
	list:[]
};

在模板组件里引用mapState方法，相当于get获取state里面的内容

import { mapState} from "vuex";

computed计算属性里面定义个数组，…这个扩展运算符将vuex中的数据映射到组件的computed里

computed: {
 
...mapState(["list"]) //数组或者下面的对象都可以
...mapState({
    num: 'list'
   })
},
//再或者下面这种函数写法最好
...mapState({
  num: state => {
    return state.list;
  }
}),
//这样就可以直接引用了；

mapMutations 方法

引用mapMutations 方法改变转态里面的值，简单的业务逻辑写在这里面，复杂的写在actions里面（比如一些异步请求等）

import { mapState, mapMutations } from "vuex";

store里面声明方法

const mutations = {
	add(state){
		state.num+=1
	},
	minus(state){
		state.num-=1
	}
};

方法里面引用需要用到的方法

<div @click="add">加</div>

<div @click="minus">减</div>

  methods: {
    ...mapMutations(["add", "minus"]),

    add(state) {
      this.$store.commit('add')
    },
    minus(state) {
      this.$store.commit('minus')
    }
  }
  //简单的加减操作完成
```js
**actions方法**

> 处理一些异步或者复杂的逻辑，如果需要改变转态通过context去调用mutations 里面的方法
> 

    const actions = {
    //store 里面声明
  	  	myAdd(context){
  	  		context.commit('add')
  	  	},
  	  	myMinus(context){
  	  		context.commit('minus')
  	  	},
    }

> methods里面引入actions里面定义的方法 
> 

import { mapState, mapMutations ,mapActions} from "vuex";  //要用什么方法就要在这里先引用

 ...mapActions(["myAdd", "myMinus"]),
myAdd(context){
	context.commit('add',2)
	//后面也可以直接带参数，和函数传值一样，mutations里面的add方法里面接收就行
},
myMinus(context){
	context.commit('minus',1)
},

和界面相关的操作尽量不要放actions里来，用函数返回出来就行

	async myAdd(context){
		context.commit('add',2)
		// let add = await axios.get(......)
		return 'actions返回'
	},

    async add(state) {
      let add = await this.myAdd();
      console.log(add);
    },

getters方法

getters方法可以对state里面的值做一些再处理，在computed里面引入需要用到的方法

const getters = {   //实时监听state值的变化(最新状态)
	myNum(state){
		return `getters处理过得值 ${state.num+10}` 
	},
}

   ...mapGetters(["myNum"]),
   //这样就可以直接使用myNum了

导出store里面的相关属性和方法

const store = new Vuex.Store({
	state,
	getters,
	mutations,
	actions
});
export default store;