vuex

vuex的概念：

vuex是全局状态管理工具(单向数据流)， 是一个专为 Vue.js 应用程序开发的状态管理模式。主要用来解决组件之间的一个数据沟通问题，一般用于大型项目之间的一个数据传递（方便），小型项目一般不会用它，因为比较消耗性能.(偶和性，是个插件)

安装下载

搭建环境：

1.下载到生产环境：cnpm install vuex -S
2.下载完成后在src下新建一个store文件夹，文件夹下新建一个index.js文件
  index.js

import Vue from 'vue'    //引入vue
import Vuex from 'vuex'  //引入vuex
//  vue 去使用vuex
Vue.use(Vuex)

// 实例化
let store = new Vuex.Store({
    state:{
       count:100
    },
    mutations:{
    },
    getters:{ 
    },
    actions:{
    
    },
})
export default store    //导出

3.找到main.js

import store from './store'
new Vue({
  el: '#app',
  router,
  store,   //挂上
  components: { App },
  template: '<App/>'
})

4.在任意组件中里打印this.$store.state.count,如果有count为100,则说明
  vuex环境搭建没有问题。

核心：

核心就是 store（仓库）:

state:      vuex中的全局状态，在任何组件中都可以拿到
mutations:  vuex中改变状态的方法集合
getters:    vuex中的计算属性
actions:    vuex中的异步方法## 标题
modules:    vuex中的数据模块化

vuex中的getters：

1.相当于vue组件中的计算属性,在store下的indx.js中和state同级

getters:{
   sum(state){
      let sum=0;
      state.arr.fprEach((item)=>{
      sum+=item
   })
   return sum
   }
}
//在组件中的计算安属性中
computed:{
   sum(){
      return this.$store.getters.sum
   }
}

vuex中的actions工作流程;：

1.想要请求的数据，你可以写在actions里，在这里定义一个方法

actions:{
  cnodeAjax(){    //同级的
       axios.get("接口地址").then((res)=>{
       context.commit("changeCnode"，res.data.data)
       })
  }
}

2.请求回来后，调用同步方法

       context.commit("changeCnode"，res.data.data)

3.同步方法改变状态

mutations:{
	changeCnode(state,res){
	   state.cnodeArr=res
	}
}

3.在组件mounted里调用actions方法

this.$store.dispath("actions方法名")

注意：它是你想要请求的数据可以写在actions里，ajax请求的数据的一个存放位置，请求回来后调用同步方法，改变状态，不可以直接去改变state状态，vuex中的state中的状态只有同步方法mutations才可以修改。

vuex持久化数据

作用:

解决了vuex的一个痛点，就是当你使用vuex页面中如果进行刷新那么操作之后的状态都还原了。

下载安装：

1.下载到生产环境：cnpm install vuex-persistedstate -S
2.在store下的index.js里引入import createPersistedState from 'vuex-persistedstate'  
3.在store中的与state，mutations同级的地方plugins: [createPersistedState()]  
加上这个就可以了。

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'  //持久化数据
//  vue 去使用vuex
Vue.use(Vuex)

// 实例化
let store = new Vuex.Store({
    state:{
    },
    mutations:{
    },
    getters:{
    },
    actions:{
    },
    plugins: [createPersistedState()]  //加上这个就可以了
})
export default store

vuex中的辅助函数

vuex中给我们提供了四个辅助函数，是给我们带来一些便利的，在需要使用的组件中按需引入就行了。

import { mapState,mapMutations,mapActions,mapGetters } from vuex;

1.mapState:可以帮助我们更快速方便的取到vuex中state中的某一个状态
  在计算属性computed:{}

...mapState(["count","color"])   //state中的状态属性名  数组形式
...mapState({count1:count})   //state中的属性状态名  对象形式可以重新命名,可以同名，也可以不同名

2.mapMutations:可以帮助我们更快速方便的取到vuex中mutations中的方法
   在计算属性methods:{}

...mapMutations(["changeNumber","changeCount"])   //mapMutations中的状态属性名  数组形式
...mapMutations({changeNumber:changeNumber})   //mapMutations中的属性状态名  对象形式可以重新命名，

3.mapActions:取到actions中的异步方法

...mapActions(["cnodeAjax"])     //数组形式
...mapActions({cnode:cnodeAjax})   //对象形式
 在Mounted中里this.cnodeAjax就可以调用了

4.mapGetters:可以帮助我们更快速方便的取到vuex中mutations中的方法
   在计算属性computed:{}

...mapGetters(["定义好的getters方法"])   //mapMutations中的状态属性名  数组形式
...mapGetters({"定义一个组件当前想用的名字","定义好的getters方法"})   //mapMutations中的属性状态名  对象形式可以重新命名，