Vuex

官方网址:vuex.vuejs.org/zh/guide/# vuex的使用

vuex在vue项目中的使用

一、环境准备

利用vue-cli全局包，下载脚手架项目，vuex基于这个脚手架项目使用

• 1、创建项目

  • vue create vuex-demo
    

• 2、进入项目根目录下载vuex

二、vuex的基础使用

• 1、下载 --- 上一步已完成，这里可省略

  • npm i vuex@3
    

• 2、main.js中引入

  • import Vuex from "vuex"
    

• 3、注册

  • Vue.use(Vuex)
    

• 4、实例化

  • const store = new Vuex.Store({})
    

• 5、挂载

  • new Vue({
        store,
        ...
    })
    

• 6、在app.vue中使用测试，如果打印出对象则成功

  • created(){
        console.log(this.$store)
    }
    

三、state

1、概念：state是放置公共状态的属性

2、基础使用

3、使用优化

4、辅助函数

目的：简化数据的使用

四、mutations的使用

1、 概念

state数据的修改 只能通过mutations，并且mutations必须是同步更新。

2. 基础使用

3、辅助函数

简化mutations的使用

4、不通过mutations修改数据，严格模式下会报错，也没有真正改到数据，所以我们不允许这样的操作

5、验证mutations只能写同步代码

五、actions的使用

1、概念

actions负责进行异步操作 dispatch

2、基础使用

3、辅助函数的使用

简化actions的使用

六、getters的使用

1、概念

除state之外，有时我们需要从state中派生出一些状态，这些状态依赖state的，此时会用到getters。

2、作用

• 1、简写state中数据的操作

3、基本使用

4、辅助函数

作用：简写getters的使用

七、modules的使用

1、概念

当所有状态都汇集到一个对象state中时，代码有可能变的臃肿，对导致vuex越来越难以维护，由此，我们可以分类管理不同的状态，这种分类管理的方法，就是模块化管理。

2、基本使用

3、优化使用

4、命名空间锁的使用

给模块添加namespaced属性并设置为true，即可为模块上锁。

作用：使得模块内mutations、actions、getters都成为局部的属性，访问其中的属性或方法必须通过模块名访问。

5、辅助函数-带模块名的使用

作用：简化命名空间模块中mutations函数的使用

6、命名空间辅助函数

作用：简化获取命名空间中的数据

命名空间的辅助函数 createNamespacedHelpers

七、解决变量或方法重名问题

八、vuex的封装

目的：便于管理维护数据