Vue中UI组件库之Vuex与虚拟服务器初识

<button @click="minus()">-</button>
</div>
</template>
<script>
export default {
methods:{
add(){
// this.$store.state.a++ //不允许直接改全局的state数据
this.$store.commit("JIA");
},
minus(){
this.$store.commit("MINUS");
}
}
};
</script>

>[/code]

Vuex自带一个日志插件（vue-logger）用于调试：

import createLogger from 'vuex/dist/logger'
const store = new Vuex.Store({
 plugins: [createLogger()]})

总结：

只有mutations中可以改变state，其他任何方式都不能改state的值

组件想要改变store中的state，只能通过commit()发出一条命令。

提交载荷（Payload）

你可以向 store.commit() 传入额外的参数，即 mutation 的 载荷（payload）,在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读：

main.js

import Vue from 'vue';
import Vuex from 'vuex'; //引入Vuex包
import App from './App.vue';
import createLogger from 'vuex/dist/logger';
Vue.use(Vuex); //将vuex安装到vue中
//创建一个仓库，并且存放一些全局数据（存放四大选项）
const store = new Vuex.Store({
 state : {
 a : 100
 },
 mutations : {
 // 这里的函数只能通过commit()触发，其他操作是无法影响的
 JIA(state,payload){
  state.a += payload.n
 },
 MINUS(state, payload){
  state.a -= payload.n
 }
 },
 plugins: [createLogger()]})

App.vue

<template>
 <div>
 <h1>全局仓库state对象的a：{{$store.state.a}}</h1>
 <button @click="add()">+</button>
 <button @click="minus()">-</button>
 <button @click="add(2)">+</button>
 <input type="text" ref="txt">
 <button @click="addUser()">加用户输入的数</button>
 </div>
</template>
<script>
export default {
 methods:{
 add(n=1){
  // this.$store.state.a++ //不允许直接改全局的state数据
  // this.$store.commit("JIA", 8);
  this.$store.commit("JIA", {n});
 },
 minus(){
  this.$store.commit("MINUS", {n : 10});
 },
 addUser(){
  this.$store.commit("JIA", {n : Number(this.$refs.txt.value)});
 }
 }
};
</script>

记住一条重要的原则：mutations必须是同步函数

4.4 actions

上面说过mutation 中不能写异步语句，为了处理异步操作，我们来看一看action

action 类似于 mutation，不同在于：

action 提交的是 mutation，而不是直接变更状态。

action 可以包含任意异步操作。