Vuex共享数据状态管理

**

Vuex状态管理总结

**

一、Vuex（Store）是什么？

1、专属于Vue的
2、管理数据状态的一个库
3、所有组件都可访问，以方便管理数据

二、什么情况使用Vuex？

在中大型单页面使用，能更好的管理数据

三、如何使用

1、安装vuex

vue add vuex

2、简单使用流程

（1）main.js引用

<script>
import Vue from 'vue'
import App from './App.vue'
import store from './store'  //引入vuex入口文件

Vue.config.productionTip = false

new Vue({
  store, //注册vuex
  render: h => h(App)
}).$mount('#app')
</script>

（2）数据的保存和调用方式

第一、state和mapState的获取方式

*
*store.js
*
<script>
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
    state: {
        num: 0
    }
})
</script>


*
*组件
*
<template>
    <div class="hello">
        <h1>{{ num}}</h1>
        <p>{{othorAct}}</p>
    </div>
</template>

<script>
    import {mapState} from 'vuex';
    export default {
        //第一种获取方式
        computed: {
            num() {
                return this.$store.state.num;
            }
        },
         
         //第二种获取方式
         computed: mapState({
             num:state => state.num
         }),
         
         //第三种获取方式
         computed: mapState(['num']),

 		//第四种获取方式
         computed: {
             ...mapState(['num']),
             othorAct(){
                 return '其他事件';
             }
          }

    }
 </script>

第二种、getters的获取方式

A、 getters是state派生出来的数据，也就说是对state二次加工之后返回的数据；
B、 getters对调用state并且修改的数据，不影响state原始数据；

*
*store.js
*
<script>
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
    state: {
        num: 0
    },
    getters: {
        getNum: state => {
            return ++state.num;
        }
    }
})
</script>


*
*组件
*
<template>
    <div class="hello">
        <h1>{{ num}}</h1>
    </div>
</template>

<script>
    export default {
        //第一种获取方式
        computed: {
            num() {
                return this.$store.getters.getNum;
            }
        },
    }
 </script>

第三种、mutations修改state数据

A: mutations是对statue里面的数据进行真实修改，会影响原始数据
B:组件调用mutations的元素使用commit；如：this.$store.commit(‘updateNum’);

*
*store.js
*
<script>
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
    state: {
        num: 0
    },
    getters: {
        getNum: state => {
            return ++state.num;
        }
    },
    mutations: {
        updateNum: state => {
            state.num++;
        }
    }
})
</script>


*
*组件
*
<template>
    <div class="hello">
        <h1>{{ num}}</h1>
    </div>
</template>

<template>
    <div class="hello">
        <div>
            <span>state:{{def_data}}</span>
        </div>
        <div>
            <span>getters:{{get_data}}</span>
        </div>
        <button @click="updateStateNum">mutation修改state数据</button>
    </div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        data(){
            return {
                def_data:this.$store.state.num
            }
        },
        methods: {
            updateStateNum() {
                this.$store.commit('updateNum');
                this.def_data = this.$store.state.num
            }
        },
        computed:{
            get_data(){
                return this.$store.getters.getNum;
            }
        }
    }
</script>

第四种、action异步操作mutations

1、action提交时是操作mutations，而不是直接更改状态
2、 action主要用于异步操作
3、组件调用action的元素使用dispatch；如：this.$store.dispatch(‘testAct’);

*
*store.js
*
<script>
import Axios from 'axios';
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        num: 0,
        list: {}
    },
    mutations: {
        updateNum: state => {
            state.num++;
        },
        updateList(state, rsData) {
            state.list = rsData;
        }
    },
    actions: {
        testAct(context) {
            context.commit('updateNum')
        },
        async getHttpList({ commit }) {
            const res = await Axios.get('http://jsonplaceholder.typicode.com/todos')
            commit("updateList", res.data);
        }
    }
})
</script>


*
*组件
*
<template>
    <div class="hello">
        <div>{{this.$store.state.num}}</div>
        <div>{{this.$store.state.list}}</div>
        <button @click="updateStateNum">异步并修改state数据</button>
        <br>
        <button @click="getHttpList">异步获取数据</button>
    </div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        methods: {
            updateStateNum() {
                this.$store.dispatch('testAct');
            },
            getHttpList() {
                this.$store.dispatch("getHttpList");
            }
        }
    }
</script>

第五种、modules模块管理数据

1、在index.js中，modules建议使用关联下标，在维护过程中方便快速定位

*
*index.js
*
<script>
import Vue from 'vue'
import Vuex from 'vuex'
import Num from './modules/num';
import Htlist from './modules/htlist';
Vue.use(Vuex)

export default new Vuex.Store({
    modules: {
        'NumModel': Num,
        'HtlistModel': Htlist
    }
})
</script>

*
*模块文件：num.js
*
<script>
const state = {
    num: 0
};
const getters = {};
const mutations = {
    updateNum: state => {
        state.num++;
    }
};
const actions = {
    testAct(context) {
        context.commit('updateNum')
    }
};

export default {
    state,
    getters,
    mutations,
    actions
};
</script>

*
*模块文件：htlist.js
*
<script>
const state = {
    list: {}
};
const getters = {};
const mutations = {
    updateList(state, rsData) {
        state.list = rsData;
    }
};
const actions = {
    async getHttpList({ commit }) {
        commit("updateList", { 1: 'ok' });
    }
};

export default {
    state,
    getters,
    mutations,
    actions
};
</script>

*
*组件
*
<template>
    <div class="hello">
        <div>{{$store.state.NumModel.num}}</div>
        <button @click="updateStateNum">异步获取并且修改state数据</button>
        <br>
        <br>
        <br>
        <div>{{$store.state.HtlistModel.list}}</div>
        <button @click="getHttpList">异步获取数据</button>
    </div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        methods: {
            updateStateNum() {
                this.$store.dispatch('testAct');
            },
            getHttpList() {
                this.$store.dispatch("getHttpList");
            }
        }
    }
</script>