Vue实战之VueX 状态管理

Vue 实战

十四、VueX 状态管理

1、简介&安装

（1）简介

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

（2）在Vue Cli 项目中安装 vuex

npm install vuex --save

（3）配置 vuex

1. 在脚手架项目的src目录中创建 store目录，在store目录中创建 index.js

• 代码如下

2. 在main.js中引入store并注册状态管理器到 Vue 实例中

（4）使用状态管理器

2、state 属性

• 作用：用来全局定义一些共享的数据状态

• 语法：

const store = new Vuex.Store({
	state:{
		counter:0,//定义共享状态
	},
}

• 使用：

{{$store.state.counter}} ===> {{this.$store.state.counter}}

3、mutations 属性

• 作用： 用来定义对共享的数据修改的一系列函数
• 语法：

const store = new Vuex.Store({
  state:{
    counter:0,//定义共享状态
  },
  mutations:{
    //增加
    increment(state){
      state.counter++
    },
    //减小
    decrement(state){
      state.counter--
    }
  }
});

• 使用：

this.$store.commit('decrement');
this.$store.commit('increment');

• mutations传递参数

- a.定义带有参数的函数
  mutations:{
	   //addCount 参数1:state 对象 参数2:自定义参数
	   addCount(state,counter){
  	   console.log(counter);
  	   return  state.counter += counter ;
	  }
  }
- b.调用时传递参数
  this.$store.commit('addCount',11);

4、getters 属性

• 官方定义：允许我们在 store 中定义getter（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据 它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

• 作用：用来定义对共享的数据的计算相关的一系列函数 相当于 computed 属性 会对结果进行缓存

• 语法：

getters:{
  //平方
  mathSqrts(state){
    console.log("--------");
    return state.counter*state.counter;
  },
  //乘以一个数字
  mathSqrtsNumber(state,getters){
    return getters.mathSqrts*3;
  },
  //传递参数
  mathSqrtsNumbers(state,getters){
    return function (number){
      return  number;
    }
  }
}

• 使用

-	1.{{$store.getters.mathSqrts}}
-   2.{{$store.getters.mathSqrtsNumber}}
-   3.{{$store.getters.mathSqrtsNumbers(3)}}

代码仓库