VueX 理解

vue入门

安装

yarn add vuex
npm i vuex

store 的作用域

只有被挂载store的组件和它所有子组件 才能拥有$store

vuex的属性

strict 严格模式

state 状态 全局共享状态

state里 存放的是数据

getters: store 的计算属性，对state 监听

监听state里的值 返回一个新值 (可以做一些操作)

mutations：唯一可以修改state的方法

mutations里放 修改state的方法 所有的修改都由这里的方法修改
所有的方法都会被注入一个state的参数,用这个方法来调用state里的值

    mutations:{
    //自动被注入的↓  v 是传过来的参数 用来修改的新值
        method(state,v){
            state.prop=v
        }
    }

actions： 用于执行异步操作 不可以直接修改state 只能调用 mutations 里的方法修改

actions里有用来执行异步进行 (向后端发送请求)

actions里 和 mutations 差不多 存放的是接口方法

actions 里 的方法会被注入一个全局上下文对象 _this(),他和this是一样的,
由于我们只用_this里的commit 就解构成{commit} 就可以
_this指向的是根实例

    actions:{
// 被注入的全局上下文解构 成为{commit} 
      Send({commit},v ){
// 调用mutations里的方法↓
            commit('method',v)
      }
    }

mutations 和 actions 的调用

mutations 用 commit 调用
commit() 有2个参数 1-mutations里的函数名, 2- 传入的参数或数据,

actions 用 dispatch调用
dispatch() 用2个参数 1- actions里的函数名，2- 传入的参数或数据，

module:模块化

模块化:
为了解决大型项目中独立共享状态的
它以给个独立的module.js 为独立模块
module里是用来挂载子模块的 有2种挂载方式

示例：

    module:{
//  方法一:直接挂载 import 引入的a.js文件（a模块）
   A:a,
// 方法二: 直接在里面写你的模块 调用时用B调用
   B:{
     // 命名空间 给单独一个模块起名字,让它有自己的作用域
     namespaced:true,//开启命名空间

   }
 }

plugins:插件 用来扩展vuex里没有的功能

比如让vuex拥有没有的功能，比如vuex的数据是存在内存中的 刷新页面会丢失 使用vue-persist插件将数据存入本地 当刷新页面的时候优先从本地读取

如何区分生产环境还是开发环境？

process.env

• 开发环境里的值是:development

• 生产环境里的值是:production
  console.log(process.env) 查看是env的值

• module 模块化 Store
  干什么的 ？
  切割vuex 让每个独立使用的store的页面拥有自己的store
  比如电商项目中 每个页面除了使用全局的用户信息外，还有额外的自己独立页面使用的状态尤其是当小组开发的时候，避免冲突使用模块化
  比如电商项目中独立的模块

• plugins 插件
  让vuex拥有没有的功能，比如vuex的数据是存在内存中的 刷新页面会丢失 使用vue-persist插件将数据存入本地 当刷新页面的时候优先从本地读取

Vuex 执行|的工作流程

state到组件，组件通过dispatch调用actions进行通信， actions通过commit调用mutations 修改state，
state是双向数据响应的 会自动让组件更新

辅助函数

1. mapState
2. mapGetters
3. mapMutations
4. mapActions