vuex

1、

• state，驱动应用的数据源；
• view，以声明方式将 state 映射到视图；
• actions，响应在 view 上的用户输入导致的状态变化。

    

Action 类似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。
•  mutation 必须是同步函数

2、使用vuex的配置

 下载vuex 

npm install vuex --save

 在src下创建一个新的文件夹store，在store下创建index.js，配置子模块的加载

import Vue from 'vue';
import Vuex from 'vuex';
import createLogger from 'vuex/dist/logger';

Vue.use(Vuex);

const modules = {};
storeModules.keys().forEach((k) => {
    const key = k.replace(/\.\/|\.js/g, '')
        .replace(/-+|\.+|_+/g, '-')
        .replace(/-([a-z])/g, (s1, s2) => {
            return s2.toUpperCase();
        });
    modules[key] = storeModules(k).default;
});

export default new Vuex.Store({
    modules: {
        // 基于文件名，生成store子模块名称
        ...modules,
    },
});

 在main.js引入store，并全局注册

import store from './store/index'


new Vue({
  el: '#app',
  store,
  components: { App },
  template: '<App/>'
})

 然后在store下创建modules文件，分模块管理数据，在state里面声明变量，mutations里更新数据，actions获取后台数据，如果需要对数据进行处理，可以在getters里面进行。

import axios from 'axios'
export default {
    namespaced: true,
    state() {
        return{
            list:[]  //定义变量
        } 
    },
    mutations:{
        updatList(state,data) {
            console.log(data);
            state.list = data;   //更新数据
        }
    },
    actions:{
        getListData(context) {
            axios.get('static/data/listData.json')
                .then((res) => {
                    console.log(res.data);
                    const result = res.data;
                    console.log(result);
                    context.commit('updatList', result);   //提交给mutations
                })
                .catch((err) => {
                });
        },
    }
};

在admin.vue 里引入

import{mapState,mapActions,mapGetters,mapMutations} from 'vuex';

export default {
  name: 'admin',
  data () {
    return {
  
    }
  },
 computed: {
    ...mapState('admin',['list']) //引入state里的变量，可以直接使用
  },
  methods: {

    ...mapMutations('admin',[
      'updatList'
    ]),
    ...mapActions('admin',[
      'getListData'
    ]),
  }
}