vue中怎么使用vuex

做一个简单的vuex如何使用的介绍:

先安装:

npm i vuex --save-dev

新建一个store文件夹,

在store文件夹中建一个index.js文件,在该文件中:

        import Vue from 'vue'

        import vuex from 'vuex'

        Vue.use(vuex)

        var state={　　 //state中的属性就是需要在vuex中存放的数据

            name:"电脑",

　　　 age:2,

　　　  data:'布拉布拉'       

        }

        

        var actions={     //异步方法,比如这里就定义了一个叫做changeName的方法

            changeName(context,name){

                context.commit('changeName',name)

            }

        }

        var mutations={    //同步方法,  这里的方法命名最好与上面的一样,比如这里都是changeName

            changeName(state,newName){

                state.name=newName        //改变state中的name值为newName

            }

        }

 

        var store=new vuex.Store({

            state,

            actions,

            mutations

        })

    export default store

=================================================================

在main.js文件中,引入store:

import store from './store'         //vuex状态管理器

        new Vue({

            el:"#app",

            router,

            store

        })

 

    // 在组件中调用state中的数据:比如name的方式

        {{$store.state.name}}

　//在组件中触发change方法,然后再在该方法中调用vuex中的changeName方法的方式:

        <button @click="change">改变名字</button>

 

        {

            methods:{

                change(){

 　　　　     // 这一步与vuex中的   changeName(state,newName){  state.name=newName } 相对应,  至此,vuex中的name就被修改成了  '新电脑'

                    this.$store.dispatch("changeName",'新电脑')     

                }

            }

        }

 

 

 总结:

    state  :中存放vuex中的数据

    actions  :中定义异步方法

    mutations :中定义同步方法

　this.$store.dispatch("changeName",'新电脑')    :调用vuex中的方法、传参的方式

    $store.state.name    ：使用vuex中的数据，比如使用name的方式