Vue Vuex

什么是VUEX？

主要应用于Vue.js中管理数据状态的一个库
通过创建一个集中的数据存储，供程序中所有组件访问

根组件下面的两个组件想要获取根组件的数据的话 可以通过Vue中的prop属性进行传值

建议将npm的注册表源设置为国内的镜像可以提升安装速度
设置镜像 ：（持久使用 ）

npm config set registry http://registry.npm.taobao.org
//配置后可通过下面方式来验证是否成功
npm config get registry
//或
npm info express

通过cnpm使用

npm install-g cnpm --registry=https://registry.npm.taonao.org

安装Vue脚手架：

$ npm install -g vue-cli

使用Vue初始化项目：

$ vue init<template=name> <project=name>

安装Vuex：

npm install  vuex

store.js状态管理的主文件

1.安装 cnpm install vuex --save
2.main.js引入
import Vuex from 'vuex'
import store from'@/store/store'
3./store/store.js 状态管理的主文件

import Vue from'vue'//引入Vue
import Vuex from'vuex'//引入vuex
import State from'./state'//引入数据管理文件
import Mutation from'./mutation'//引入 事件触发修改state.js中的数据 文件
import Getter from'./getter' 引入返回state.js中的数据 文件
Vue.use(Vuex);//将vuex和Vue关联

4.实例化store

let store=new Vuex.Store({
  state:State,
  getters:Getter,
  mutations:Mutation
});
export default store;//main.js引用

State.js数据管理文件

let state={
    data:[],
    data1:[]
}
export default state;

mutation.js事件触发文件

let mutation={
  fn(state,params){
  //修改state数据
     state.data1=new data;
  }
}
export default mutation;

getter.js事件触发文件

let getter={
  getfn(state){
  //返回state数据
  return state.data1;
  }
}
export default getter;

组件内使用

直接引用

methods:{
//触发Mutations
  this.$store.commit(fn,{params:paramsdata})
  //获取store里面的数据
  this.$store.state.data
  this.$store.getters.data
}

mapGetters mapMutation 助手

mutation赋给 methods方法

methods:{
...mapMutations({
  fninfo:"fn" //fninfo()
  })
}

mapGetters 计算后 返回传值对象

computed:{
...mapGetters({
  getfninfo:"getfn" //是一个对象
  })
}