vuex的使用

vuex是一个状态管理库，集中式管理项目中组件共用数据

下载vuex:npm install vuex --save

回到入口文件main.js 引入仓库 注册仓库

需要使用插件一次Vue.use(Vuex);

import Vue from "vue";
import Vuex from "vuex";
//需要使用插件一次
Vue.use(Vuex);

//对外暴露store类的一个实例(你需要暴露这个类的实例，如果你不对外暴露，外部是不能使用的)
export default new Vuex.Store({
  //实现Vuex仓库模块式开发存储数据
  modules:{

});

vuex的四个模块：

const state = { } //仓库存储数据的地方

const mutaions = { } //修改state唯一的地方,只能处理同步

const actions = { } //处理异步场景，处理成功后把数据提交给mutaions去改变数据，进而修改state

const getters = { } //理解为计算属性，可以简化仓库数据，让组件获取仓库数据更方便

加入vuex,数据就多了$store属性

state

数据源存放地，可用$store.state.xx调用数据

vue组件从store中读取数据，若是store数据改变，那这个组件的数据也会改变。

const state = {
.... : ...
}

mapState

简化获取store数据的代码，把vuex中的state数据映射到组件的计算属性中

import {mapState} from 'vuex'

computed:{
...mapState([''])
}

mutations

action中的commit来触发

只能写同步代码，action可以写异步

mutions是唯一修改state的地方

actions

通过commit()来触发mutation的调用，间接更新state

组件中this.$store.dispatch('action名称'，data1)触发action

将mutations的数据方法变成可异步处理函数的方法，异步操作数据

  mounted() {
    //派发action,通知vuex发请求获取对应组件的数据，存储于仓库中
    this.$store.dispatch("");

const actions ={....

      ({commit, state}, data)

               commit('...', {data})

   }

}
//commit提交给mutations

getters

理解为计算属性，可以简化仓库数据，让组件获取仓库数据更方便

1.在组件中，通过dispatch()函数分发给actions函数去处理

2.actions函数可以与后台交互，可通过commit（）提交给mutations去处理

3.  mutations可以直接修改state（数据状态）

4.计算属性，状态通过getters的$store.getters()或mapGetters()来更新组件

反过来就是通过$store.state()或mapState的方法来更新组件