Vue【vuex使用步骤】

vuex使用总结

• 安装方法
• npm install vuex --save / yarn add vuex --save
• 然后在项目的src文件夹下创建一个store文件夹
• 然后在文件夹下创建index.js文件
• 在js文件中引入vue和vuex

    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex) // 在vue中使用vuex
    const store  = new Vuex.Store({ // 实例化出store对象
        state: { // 数据的集合
            user: {}
        },
        getters {
            // 相当于vue页面中的computed属性可以对数据进行计算处理
            // 所有的计算属性的方法都有默认参数state
            changeName(state) {
                return 自己想要的数据
            }
        },
        mutations: {
            // 是唯一的能够修改store数据状态的方法 它里面是修改数据方法的集合
            // mutations中的方法都有一个默认参数是state 还可以接受形参
            saveName(state, newVal) {
                state.name = newVal
            }
        },
        actions: {
            // actions提交的是mutation他不会直接修改state中的数据
            // 但是actions中的方法可以进行异步操作
            getProduction({commit, state}, newVal) {
                // context是一个默认参数里面包含了state数据和提交mutation的commit方法
                // 所以可以进行解构赋值 context => {commit, state}
            }
        }
    })
    export default store

• 然后要在main.js中导入store

    import store from './store'
    // 然后将store放入vue实例化对象中
    new Vue({
        store
    })

• 在vue页面中使用store和操作store数据

    <template>
        <div>
            <!-- 直接使用state中的数据 -->
            {{$store.state}} 
            <!-- 使用计算属性的数据 -->
            {{$store.getters.计算属性}}
        </div>
    </template>

• 在vue文件中也可以处理store中的数据

    this.$store.state // 拿到store中state的数据
    this.$store.getters.计算属性 //可以那对应的计算属性的值

• 通过辅助函数取store中的数据

    import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
    export default {
        computed: {
            ...mapState([
                // 我们要去除的对应数据
                'user'
            ]),
            ...mapGetters([
                // 要使用的计算属性
                'changeName'
            ])
        },
        created() {
            // 可以通过提交mutation的方法来修改state中的数据
            this.$store.commit('mutation方法' , '要传递的参数')
            // 可以通过dispatch方法来调用actions中的方法
            this.$store.dispatch('getProduction', '要传递的参数')
        },
        methods: {
            // 也可以通过mapMutations取出mutations中的方法然后this.方法名（）进行方法调用
            ...mapMutations([
                'saveName'
            ]),
            // 也可以通过mapActions取出actions中的方法然后this.方法名（）进行调用
            ...mapActions([
                'getProduction'
            ])
        }
    }