vuex-vue状态管理

1.vuex下载

1.使用Vuex官方的的文档使用npm(npm install vue@next --save)或者yarn等下载；

2.使用vue-cli中Manually select feature进行手动选择vuex；

2.vuex文件

使用vue-cli快速搭建的vue模板中vuex的文件会默认存储在store文件下，默认文件名为index.js;

在该文件中导出一个新的Vuex.Store的实例对象；

import Vue from 'vue'
// 导入vuex
import Vuex from 'vuex'

Vue.use(Vuex)

// 创建一个仓库对象并且导出
export default new Vuex.Store({
  state: {
    a:10,
    arr:[],
    text:'the day is once more ',
    arr1:['z3','l4','w5','z6'],
    name:{
      firstName:'迈克尔',
      lastName:'杰克逊'
    }
  },
  getters: {
    // 参数state是state字段
    fullName(state){
      return state.name.firstName + state.name.lastName;
    }
  },
  mutations: {
    // 修改状态数据
    // 参数一是state字段,参数二是传递的数据;
    setA(state,v){
        state.a = v;
    },
    settext(state,v){
        state.text = v;
    },
    setarr1(state,v){
        state.arr1 = v;
    },
    setarr(state,v){
      state.arr = v;
    }
  },
  // 修改state数据的,通过异步的方式获取数据,通过同步额mutations进行修改
  actions: {
    // 封装一个请求数据的方法
    // action里面的方法参数是仓库对象store,而不是stat状态对象
    queryData(store){
      return new Promise((resolve, reject) => {
        fetch('hook.json').then(res=>{
          return res.json();
        }).then(res=>{
          store.commit('setarr',res);
          resolve(res);
        })
      })
    }
  },
  modules: {
  }
})

导出的仓库对象中通常会使用其六个属性值：

1. state  共享数据定义在state字段里面,state里面数据是只读的,不能直接修改,mutations进行同步修改;或者通过actions进行异步修改,但是action异步修改本质上也是通过mutations进行修改的;(类比于组件中的data);

2. getters   如果组件使用了state的数组的一部分数据,建议过滤数据在getter进行过滤;(类比于组件中的computed);

3. mutations    定于数据的修改方法,只能通过mutations进行更改state数据,可以有效追踪state数据的变化;(类比于组件的methods);

4. actions     异步的数据获取在actions中进行获取,例如网络请求或者定时器等异步操作修改state数据;(功能类比于组件中的created,但是与之不同，这是个属性值是个对象,在对象中定义异步函数,在异步函数中再调用mutations中方法,更改state中的数据)

 5. modules     子仓库 当我们一个跟仓库定义的数据量太多时候,可以把数据分为拆分每个子仓库里面

 6.  plugins    仓库中使用的插件

2.1 state属性

在导出仓库对象中的state对象字段直接设置属性名和属性值；

2.1.1 取值

在导出的仓库对象内部使用state中定义的数据:state.自定义的变量名；

方法一:在外部组件使用可以直接使用{{$store.state.自定义的变量名}} 进行调用仓库中的数据对象；

方法二: 导入映射的state: import { mapState } from "vuex"；在组件的computed字段中：...mapState(['a','text','arr1']),将仓库对象中a,text,arr1对应的数据映射到该组件中然后展开在计算属性中，可以像使用data中的数据一样({{自定义的变量名}})使用这些数据，但是这些数据并不能在组件的方法中进行更改;

2.1.2 更改

1.调用mutations中定义的函数,调用

3. this.$store.state.变量名 = 更改后的值; (vuex4官方不推荐)

2.2 getters

在导出仓库对象中的getters对象字段直接设置函数，该函数的第一个形参是state；该函数有return；

2.2.1 调用

1.直接使用{{$store.getters.函数名}}进行调用；getters中的函数有return；

2. 导入映射import { mapGetters} from "vuex";

在组件的componted字段中使用...mapGetters(['定义的函数名'])将需要的进行引入；

然后像使用componted中定义的计算属性一样({{仓库中自定义的gitters中的函数名}})使用；

2.3.0 mutations

在导出仓库对象中的mutations对象字段直接设置函数，该函数的第一个形参是state，第二个形参是自己可以自定义的参数；

2.3.1 调用

在导出仓库的对象的内部中调用:store.commit('调用的函数名'，传入该函数的参数)

1.直接使用：在组件的methods字段中定义的函数体中使用：this.$store.commit('函数名',函数的参数)进行调用:

2. 导入映射import { mapMutations} from "vuex";

在组件的methods字段中使用...mapMutations(['定义的函数名',"定义的函数名2"])将需要的函数进行引入；

然后在methods中的某个函数体中使用this.导出仓库中的mutations中定义的函数名(函数参数)进行调用；

2.3.2 导出仓库对象内部actions字段调用

使用sstore.commit('自定义的函数名',传入的参数)；

2.4 actions

在导出仓库对象中的actions对象字段直接设置函数，该函数的第一个形参是store；与前两个属性不同；且在请求到数据后,会使用store.commit('自定义的函数名',传入的参数)调用mutations中的函数更改state中的数据值；

2.4.1 外部组件调用(created钩子函数中)

1. 在钩子函数中this.$store.dispatch('导出的仓库对象中actions字段中的异步函数名',传入的参数)；

在导出的仓库对象中的action字段中的异步函数中会在异步函数结束后使用mutations中的方法更改state中的值;this.$store.commit('导出的仓库对象中mutations字段中的函数名',传入的参数)；

然后再调用使用state中的值即可；

2. 导入映射: import { mapActions } from 'vuex';

再在组件的methods字段中：...mapActions(['自定义的异步函数名'])；

之后再created中调用this.自定义的异步函数名(参数)；

之后在组件中再去调用state中的数据就可渲染页面；

mapState 映射状态的 在计算结果中使用\

mapGetters 映射getters字段的方法 在计算结果中使用

mapMutations 映射修改方法的  在methods进行使用

mapActions 映射actions异步方法的 在methods进行使用

 3.modules与plugins

1.使用import将子组件导入在导出的根仓库的js文件中

import moduleSon from "./module";

modules字段中是将store中的子仓库在导出的根对象中进行注册；

modules: {
    // 将子仓库中在根仓库中进行注册
    son:moduleA
  }

3.1 子仓库与根仓库的调用数据与方法的对比

子仓库与根仓库的调用数据与方法的对比

	根仓库
	直接调用	使用映射
state	this.$store.state.自定义变量名	import {mapState} from from "vuex"                 ...mapState                 this.变量名
getters	this.$store.getters.自定义函数名	import { mapGetters } from from "vuex"                 ...mapgetters                 this.函数名
mutations	this.$store.commit("自定义函数名",传入函数的参数)	mport { mapMutations } from from "vuex"         ...mapMutations ([”函数名“])                 this.函数名(参数)
actions	this.$store.dispatch("自定义函数名",传入函数的参数)	mport {mapActions} from from "vuex"         ...mapState(["函数名"])                 this.函数名(参数 )

1.传入函数的参数是选填项；

2.在页面使用时候不需要写this,但是需要用两个大括号嵌套包裹住(state和getter比较多);

3.mutation直接调用是全局仓库store对象的commit方法,而actions直接调用使用的是全局仓库store对象的dispatch方法;