vuex的五个核心属性

VueX 是一个专门为 Vue.js 应用设计的状态管理构架，统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )。

Vuex有五个核心概念：

　　state, getters, mutations, actions, modules。

　　1. state：提供唯一的公共数据源,所有共享数据都要统一放到Store的State中进行存储

　　 2. geeter：从基本数据(state)派生的数据，相当于state的计算属性

　　 3. mutation：用于变更Store中的数据，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。

　　 回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数,只能通过mutation变更store数据,不可以直接操作Store中的数据。

　　 4. action：和mutation的功能大致相同，不同之处在于 1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。

　　  5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

Vuex的用法：

• 　安装 npm install vuex --save
•     src里面创建store文件夹
•     创建index.js配置vuex

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
	//存放的内容所有组件都可以访问,类似于data
	name:"张三'
	},
  mutations: {},
  actions: {},
  modules: {},
});

•     在main.js　

import store from "./store";

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

　

核心概念：state、 getter 、mutations 、 actions 、modules

 

mutations

更改 Vuex 的 store 中的状态的惟一方法是提交 mutation。Vuex