Vuex使用 详解 任意组件间通信

下载vuex

npm install vuex --save

创建store-index.js文件

import Vue from "vue";

import Vuex from "vuex";

Vue.use(Vuex);

const store = new Vuex.Store({

  // 定义变量 存储数据

  state: {},

   //   进行加工 处理成新的数据

  getters: {},

  //   操作数据

  mutations: {},

  //   异步操作数据

  actions: {},

});

export default store

main.js中引入vuex

 

 使用vuex

state

相当与data，定义变量，存储数据，供全局使用。

定义state

 组件中使用state

方法1：     this.$store.state.全局数据名称

 

方法2：导入mapState      （常用）

 

 方法3：   {{$store.state.name}}

 

getters

对state的数据进行加工，处理成新的数据

定义getters

使用getters

方法1：  this.$store.getters.定义的方法 

方法2：导入mapGetters 

进行了到这里，你已经可以对值进行读取操作了。原生值为’state‘  修饰值为’getters‘

接下来进行值的修改。

mutations

修改state里面的值

定义mutations

 

使用mutations

方法1：直接使用

方法2： 导入mapMutations

 

 

 Mutations里面的函数必须是同步操作，不能包含异步操作！

actions

实现异步操作

定义actions

 

使用actions

方法1：this.$store.dispatch('方法名称')

方法2：导入 mapActions

进行到这里，vuex的基本内容学习完毕，不算太大型的项目，按照这些操作是没问题的。但是我们可以发现，不管是数据存储，还是修改数据，都放在了一个文件里，这样操作是不方便的。

 

因此接下来学习模块拆分。

也就是再新建四个文件夹，划分每个属性模块

 

 

按属性进行拆分

index.js

 state.js

 

getters.js

 

mutations.js

 

actions.js

使用的方法还是如上那些，拆分之后并不造成影响。