手把手教你使用Vuex(一)

1.定义

   vuex 是一个专门为vue.js应用程序开发的状态管理模式。   

  这个状态我们可以理解为在data中的属性,需要共享给其他组件使用的部分。也就是说,是我们需要共享的data,使用vuex进行统一集中式的管理。
2.安装
  (1)利用npm包管理工具安装 npm install vuex --save   不会自动生成文件
  (2)使用vue指令add安装 vue add vuex           会自动生成文件
 
   vue3.x的vuex
    
   vue2.x的vuex

 3.五种默认基本对象

  • state:存储状态(全局变量) $store.state.变量名
  • getters:对数据获取之前的再次编译,可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun()
  • mutations:修改状态,并且是同步的。在组件中使用$store.commit('',params)。这个和我们组件中的自定义事件类似。
  • actions:异步操作。在组件中使用是$store.dispath('')
  • modules:store的子模块,为了开发大型项目,方便状态管理而使用的。这里我们就不解释了,用起来和上面的一样。
  这些对象可以在store/index.js里写到一起,如上截图,如果处理比较多的话写在一起还是很乱的,可以分开来写,如下
  

 

 4.使用

  4.1 以分开文件的vuex说明:

    vue2.x版本使用Vuex

     

     一、在store/index.js中引入这些文件和Vue,Vuex。Vue.use(Vuex);将vuex从根组件“注入”到每一个子组件中.然后把属性加在vuex对象中

 

     

      二、在src/main.js中引入store

 

   vue3.x版本使用Vuex

     

     store/index.js中注入Vuex会有变化,主要原因是创建实例方式改变,一些全局的 api 方法也不在全局上了,而是放到了实例上。

     不过放在store/index.js下有些繁琐,main.js也需要引用,不如直接放在main.js中,如下

     

 

    4.2 state中全局变量使用

    创建:

      

      store/state.js中创建一个变量count,变量名按需起名,我这只是个🌰

     调用:

      

       在html中调用和在函数中调用

     输出结果:

      

  

 

     vuex系列:

      手把手教你使用Vuex(一)

      手把手教你使用Vuex(二)

      手把手教你使用Vuex(三)

      手把手教你使用Vuex(四)

    深入vuex戳这里

 

 

 

 

posted @ 2020-09-11 11:24  你吃辣条儿吗  阅读(273)  评论(0编辑  收藏  举报