vuex中的state getters mutations actions modules

Vuex是什么

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

vuex是单向数据流；

安装Vuex

命令行：

vue add vuex

安装完成以后在src文件夹中多了一个store文件夹，这个index.js文件是vuex的主文件
index.js中要有

Vue.use(Vuex)   //在vue构造函数中去注入vuex，在vue实例对象中有$store

一般下载后就有

Vuex的store结构

export default new Vuex.Store({
strict : true,//启用严格模式，在开发过程使用以下，上线后直接关闭，因为严格模式深度检测代码，非常影响性能
  strict: process.env.NODE_ENV !== 'production',//对线程实时监测，开发时就会打开严格模式，上线时则会关闭
  state: {  // 存放状态
  },
  getters : {    //类似于vue中的计算属性 state的计算属性
  },
  mutations: {   //去修改state中的状态，同步操作
  },
  actions: {   //使用mutations去修改state中的状态，异步操作
  },
  modules: {	//将store模块化
  }
})

Vuex的五个属性

1.state 存放状态

state: {  // 存放状态
	name:"jack",
	age:18
},
//在组件methods中可以通过下面的方法修改，但是这样是不推荐使用的，是双向绑定的，不符合vuex单向数据流的设计理念
this.$store.state.name = "rose"  
//在组件模板template中，可以通过下面的获取
{{ $store.state.name }}

在组件中使用别名，推荐使用这个

import {mapState} from 'vuex';

//在组件中使用computed
export default {
	computed:{    
	  //使用拓展运算符  
	  ...mapState(["name"])
	 // 重新定义变量名，防止重名
     ...mapState({
          stateName:state =>state.name
     })
     
	}
}

2.getters state的计算属性

 getters : {    //类似于vue中的计算属性 state的计算属性
 	person(state){
       return `姓名:${state.name} 年龄:${state.age}`
  	}
 },
 
//在组件中使用computed
import {mapGetters} from 'vuex';
export default {
	computed:{    
	  ...mapGetters(['person'])
	}
}

3. mutations 修改state中的数据

  mutations: {   //去修改state中的状态，同步操作
  	 //payload   载荷  接收传过来的参数，只能是一个payload参数，不管要传多少个参数，都是传到payload中
    changeStudentList(state,payload){
      state.studentList.push(payload)
    }
  },
//因为mutations是同步的，所有异步也可以，但是在严格模式下会报错，
//使用mutations中的方法进行修改，有两种方法
//1.直接使用通过commit的方法进行修改
this.$store.commit("changeStudentList",obj)
//2.还可以使用注入的方式，changeStudentList就存在于vue实例对象中，直接可以使用
import {mapMutations} from 'vuex';
//要先在mthods中，展开
 methods : {
     ...mapMutations(['changeStudentList']),
}
//
this.changeStudentList(obj)
   

4. actions 修改state中的数据

actions: {   //去修改state中的数据，这个里面的方法名可以和mutations重名，就是使用异步
    changeStudentList({commit},payload){
        commit("changeStudentList",payload) //这句话就是指挥mutations中的changeStudentList方法修改state中的数据
    }
},

 //使用actions中的方法进行修改，有两种方法
//  1.直接使用，通过dispatch的方法进行修改
this.$store.dispatch("changeStudentList",obj)
//  2.还可以使用注入的方式，changeStudentList就存在于vue实例对象中，直接可以使用
this.changeStudentList(obj)

4. modules store模块化

modules: {
    A  //另外的store，注意先导入
}

这些就是vuex的store的基本介绍