vuex

在src下新建store/index.js

main.js

import store from './store'
Vue.use(Vuex)

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

store / index.js

import Vue from 'vue'
import {get,post} from '@/assets/js/myrequest'
import Vuex from 'vuex'
Vue.use(Vuex)

const moduleA = {
    namespaced: true,
    state: {
        m1_count: 1
    },
    mutations: {
        increment(state) {
            state.m1_count++
        }
    },

    getters: {
        doubleCount(state) {
            return state.m1_count * 2
        }
    }
}
export default new Vuex.Store({
    state: {
        count: 1,
        storeList: [{
            name: '张三',
            age: 5,
            gender: 1
        }, ],
        actionList: []
    },
    getters: {
        ageAdd(state) {
            state.storeList.forEach(item => {
                item.age = item.age + '岁'
                if (item.gender == 1) {
                    item.gender = '男'
                } else if (item.gender == 0) {
                    item.gender = '女'
                }
            })
            return state.storeList
        },
    },
    mutations: {
        add_User(state, data) {
            console.log(state.moduleA.m1_count);
            state.storeList.push(data)
        },
        up_actionList(state, data) {
            state.actionList = data
        }
    },
    actions: {
        async getList(context) {
            console.log(context);
            let res = await get(`/api/nba/platform/classify/list`)
            let {
                data
            } = res
            console.log(res);
            context.commit('up_actionList', data)
        }
    },
    modules: {
        moduleA,
        // moduleB
    }
})

组建中使用

<template>
    <div>
        <div>
            {{actionList}}
            <div v-for="(item, index) in ageAdd" :key="index">
                <span>{{item.name}}---{{item.age}}---{{item.gender}}</span>
            </div>
            <div>
                姓名:<input type="text" v-model="name">
                性别:<input type="text" v-model="gender">
                年龄:<input type="text" v-model="age">
                <button @click="addUser">add</button>
            </div>
        </div>
    </div>
</template>
<script>
    import VueTagsInput from '@johmun/vue-tags-input';
    import {
        mapState,
        mapGetters,
        mapMutations,
        mapActions 
    } from 'vuex'
    export default {
        components: {
            VueTagsInput,
        },
        computed: {
            ...mapState(['count', 'actionList']),
            ...mapGetters(['ageAdd'])
        },
        data() {
            return {
                tag:'',
                tags: [],
                gender: '',
                name: '',
                age: '',
                autocompleteItems: [
                    {text: '张三'}
                ]
            };
        },
        methods: {
            ...mapMutations(['add_User']),
            ...mapActions(['getList']),
            addUser(){
                let params = {
                    name: this.name,
                    gender: this.gender,
                    age: this.age,
                }
                // this.add_User(params)
                this.$store.commit('add_User', params)
            },
            
        },
        mounted(){
            this.getList()
            // this.$store.dispatch('getList')
        }
    }
</script>

 

每个应用将仅仅包含一个 store 实例

getter: 　　1. 当组装的数据需要再多个地方使用时，可以用getter（过滤计算等操作）
　　　　　 2. 可以认为是store的计算属性

mutation:    更改 Vuex 的 store 中的状态的唯一方法是提交 mutation

　　　　    方式1.  this.$store.commit('add_User', params)  

　　　　    方式2. ...mapMutations(['add_User']),
　　　　　　　　this.add_User(params)

action： 类似motation，提交的是mutation而不是直接变更状态；可以包含异步操作