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

日期：2020-05-11 栏目：程序人生浏览：次

由于 store 中的状态是响应式的，在组件中调用 store 中的状态简单到仅需要在计算属性中返回即可。触发变化也仅仅是在组件的 methods 中提交 mutation。

4.3 mutations

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex中的mutation非常类似于事件：每个 mutation都有一个字符串的事件类型(type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

你不能直接调用一个mutation handler。这个选项更像是事件注册：当触发一个type类型为JIA的 mutation时，调用此函数。要唤醒一个mutation函数，你需要以相应的type调用store.commit()方法：

main.js

import Vue from 'vue';
import Vuex from 'vuex'; //引入Vuex包
import App from './App.vue';
Vue.use(Vuex); //将vuex安装到vue中

//创建一个仓库，并且存放一些全局数据（存放四大选项）
const store = new Vuex.Store({
 state : {
 a : 100
 },
 mutations : {
 // 这里的函数只能通过commit()触发，其他操作是无法影响的
 JIA(state){
  state.a++
 },
 MINUS(state){
  state.a--
 }
 }
})

App.vue

<template>
 <div>
 <h1>全局仓库state对象的a：{{$store.state.a}}</h1>
 <button @click="add()">+</button>
 <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()]
})

转载注明出处：http://www.heiqu.com/384.html

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

相关推荐