vuex入门教程

vuex

(一)vuex是什么?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
(二)适用场景?构建是一个中大型单页应用
(三)优缺点:
优点:采用集中式存储管理应用的所有组件的状态
缺点:如果开发小型单页应用,使用 Vuex 可能是繁琐冗余
(四)其他方案:如果开发小型单页应用,一个简单的 global event bus 就足够您所需了
(五)说一下如何实现?要么说代码,要么说思路

   第一步:安装vuex
        npm install vuex --save

   第二步:创建一个store目录,并在内部创建一个index.js

     // 在index.js引入下面内容:
        import Vue from 'vue'
        import Vuex from 'vuex'
        
        Vue.use(Vuex);

      //创建存储数据的仓库state,集中管理数据
        const state={
             msg:"1509A"
        }
        
     //actions中的方法,这里面的方法都是异步操作
        const actions={
             setValue(context,res) {
                // console.log(res);
                context.commit('setData',res);
             }
        
        }

    //创建mutations,目的是能最终改变仓库中的数据,这里是同步操作
        const mutations={
            setData(state,result) {
              state.msg=result;
                
            }
        }   
    //暴露出去
    export default new Vuex.Store({
        state,
        actions,
        mutations
    
    })

第三步:在main.js中引入store中的index.js,并在Vue的实例中注册
     引入:
    import store from './store'
    注册:
    new Vue({
       ....
       store,
       ....
    })

第四步:在组件中如何获取/改变仓库中的数据

获取数据状态:要在computed计算属性中获取数据状态,例如:
   computed:{
        aa() {
            return this.$store.state.msg
        }
    }
      
  


改变数据状态:

   触发一个事件,然后再事件方法中用dispath派发到actions
    html部分:
    <button @click="go">将发送给B组件</button>
    js部分:
    methods:{
            go() {
              //this.$store.dispatch('actions方法名','要改变的值')
              this.$store.dispatch('setValue',this.info)
    
            }
        },

   通过commit提交到mutations对应方法
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1 细细一算原来已有七年,七年说长不长说短不短。记得那天也是下雨,成绩出来后我没回家,在朋友家的屋檐下给你打电话,...
    林风起阅读 925评论 0 2
  • 文/大雄DX (一) 繁正渊拖着疲惫的身躯走进李文的家,逯凌凌正在赏他的画。他推开门的一瞬间,逯凌凌的心里闪...
    但见归去来阅读 362评论 0 3