vuex梳理

• store => vuex文件名

• state => 存放状态(数据)

• mutation => 定义修改数据的方法，mutation 必须是同步函数

• action => 派发，用于调用mutation里的方法，通过commit 进一步处理方法

• module => 分模块管理，便于管理

• getters => 设置获取数据的快捷方式

• 取值
  1.this.$store.state
  2.getter映射mapGetters

• 修改值：

• 1.this.$store.commit('函数名',参数)=>直接用commit

 commit->mutation->state
使用commit直接调用mutation的方法改变state里的值

• 2.this.$store.dispatch('函数名',参数)=>使用action

action->commit->mutation->state
通过使用action派发到commit调用mutation的方法改变state的值

大概的常用知识点如上
下面介绍一些代码中的应用
一个比较完整的vuex文件格式

import Vue from 'vue';
import Vuex from 'vuex';
import login from './modules/login'
import header from './modules/header'
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex);

// 导出 store;
export default new Vuex.Store({
    // vuex持久化
    plugins: [createPersistedState()],
    // state(固定)是用来存放数据
    state: {
        // 显示底部
        showFooter: false,
        // 定义一个变量
    },
    // 用来获取state里面的东西
    getters: {
        /* 定义两个对象 里面有对应处理数据的函数 然后通过getters映射出去 mapGetters
         然后可以通过mapGetters访问里面对象
        */
        showFooter: (state) => {
            return state.showFooter;
        },
        // 和上面的写法一样的效果
        lastName:state=>state.lastName
    },
    // mutation用来修改state里的属性值
    mutations: {
        // 改变showFooter的状态(值)
        SHOWFOOTER(state, payload) {
            state.showFooter = payload;
        },
        // 修改名字的mutation
        editLastName(state,payload) {
            state.lastName = payload;
        }
    },
    // 派发，通过action进一步处理mutation里的方法
    actions: {
        // 修改名字的action
        editLastName({commit},payload) {
            commit('editLastName',payload);
        }
    },
    // 模板
    modules: {
        login,
        header
    }
});

里面对应的意思和作用都有备注
关于模板modules，也就是避免一个文件代码过多不便于管理，分成小块来管理
modules一般的结构

export default {
    state: {

    },
    getters: {

    },
    mutations: {

    },
    actions: {

    }
}

getter页面的应用

<template>
  <div>
    <p>
      姓是: 因为getter{{$store.state.lastName}}等同于{{lastName}}
    </p>
    <button @click="changeName">修改lastName</button>
    <router-view></router-view>
  </div>
</template>

<script>
import {mapGetters} from 'vuex';
import { debug } from 'util';
export default {
  // 计算属性
  computed: {
    // 便于访问
    ...mapGetters(['lastName'])

  },
  // 挂载实例之后调用的钩子方法,除开始就调用的方法之外的所有方法放在这个里面
  methods: {
    changeName() {
      // 修改名字,派发action => mutation => state
      this.$store.dispatch('editLastName','gao4');
     // 也可直接使用commit
      this.$store.commit('editLastName','gao4')
    }
  }
};
</script>
<style>
</style>