zoukankan      html  css  js  c++  java
  • 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的方式
  • 相关阅读:
    POJ 1015 Jury Compromise【DP】
    POJ 1661 Help Jimmy【DP】
    HDU 1074 Doing Homework【状态压缩DP】
    HDU 1024 Max Sum Plus Plus【DP,最大m子段和】
    占坑补题。。最近占的坑有点多。。。
    Codeforces 659F Polycarp and Hay【BFS】
    Codeforces 659E New Reform【DFS】
    Codeforces 659D Bicycle Race【计算几何】
    廖大python实战项目第四天
    廖大python实战项目第三天
  • 原文地址:https://www.cnblogs.com/shidawang/p/11966316.html
Copyright © 2011-2022 走看看