Vuex

最新推荐文章于 2024-11-18 18:03:48 发布

顾我安稳@

最新推荐文章于 2024-11-18 18:03:48 发布

阅读量103

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/MercuryWan/article/details/113668096

版权

参照官网

一、vuex的概念和作用解析

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

把需要多个组件共享的变量全部存储在一个对象里面
把这个对象放在顶层的Vue实例中，让其他组件可以使用，且可以实现响应式

管理什么状态？

比如用户的登陆状态，用户信息等需要在多个组件进行共享

二、单界面管理状态

让我们从一个简单的 Vue 计数应用开始：

new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    <div @click="increment">{{ count }}</div>
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
})

这个状态自管理应用包含以下几个部分：

state，驱动应用的数据源；
view，以声明方式将 state 映射到视图；
actions，响应在 view 上的用户输入导致的状态变化。

“单向数据流"示意：

在这里插入图片描述

当遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏，所以需要使用Vuex

在这里插入图片描述

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是通过mutation，这样也可以方便地跟踪每一个状态的变化。
Actions一般处理异步请求，比如axios网络请求，可以与backend后端交互

Mutation一般处理同步请求

三、Vuex的使用

安装

npm install vuex --save

store -> index.js

import Vue from 'vue'
import Vuex from 'vuex'

//1.安装插件
Vue.use(Vuex)

//2.创建对象
const store = new Vuex.Store({
  //state 单一状态树
  state: {
    count: 0
  },

  mutations: {
    increment (state) {
      state.count++
    }
  }

})

//3.导出对象
export default store

在mian.js中挂载store对象

import store from './store'

new Vue({
  el: '#app',
  store: store,
})

在组件中可以通过 $store.state 来获取状态对象，以及通过 $store.commit 方法触发状态变更

<h2>{{$store.state.count}}</h2>
<button @click="$store.commit('increment')">click me</button>

//在methods或者computed中使用
methods: {
  increse() {
    this.$store.commit('increment')
    console.log(this.$store.state.count)
  }
}

四、Getters

Getters：可以认为是 store 的计算属性。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
Getter 默认 state 作为其第一个参数，getters作为其第二个参数

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos(state){
      return state.todos.filter(todo => todo.done)
    }
  }
})

在组件中可以通过 $store.getters 对象的属性访问这些值

<h2>{{$store.getters.doneTodos}}</h2>

通过让 getter 返回一个函数，来实现给 getter 传参

//不能使用getTodoById(state,id)
getters: {
  getTodoById(state){
    return id => {
        return state.todos.find(todo => todo.id === id)
    }
  }
}

<h2>{{$store.getters.doneTodos(2)}}</h2>

五、mutations

mutations：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation

默认接受 state 作为第一个参数

传入多个参数，即 mutation 的 载荷（payload）

mutations: {
  increment (state, n) {
    state.count += n
  }
}

//调用
$store.commit('increment', 10)

在大多数情况下，载荷应该是一个对象

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

//调用
$store.commit('increment', {
  amount: 10
})

对象风格的提交方式，直接使用包含 type 属性的对象：

store.commit({
  type: 'increment',
  amount: 10
})

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

Mutation 需遵守 Vue 的响应规则

提前在你的 store 中初始化好所有所需属性。
当需要在对象上添加新属性时，你应该使用 Vue.set(obj, 'newProp', 123)
当需要在对象上删除属性时，你应该使用 Vue.delete(obj, 'delProp')

mutation 必须是同步函数，否则devtools将不能很好的追踪这个操作什么时候完成

六、actions

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以进行异步操作

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    incrementAsync (context) {
      setTimeout(() => {
          //修改state的唯一途径是mutation
          context.commit('increment')
      },1000)
    }
  }
})

组件通过 store.dispatch 方法调用action

$store.dispatch('incrementAsync')

使用载荷方式和对象方式传递参数

// 以载荷形式
store.dispatch('incrementAsync', {
  amount: 10
})

// 以对象形式
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

Action 通常是异步的，那么如何知道 action 什么时候结束呢？

store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise

actions: {
    incrementAsync (context) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          context.commit('increment')
          resolve("完成了")    //向store.dispatch传递数据
        },1000)
      })
   }
}

组件中调用

oneClick(){
    this.$store.dispatch('incrementAsync').then(res => {
      console.log(res)
    })
}

七、modules

由于使用单一状态树，应用的所有状态会集中到一个state对象。为了避免state过于臃肿，我们可以将其分割成模块（module）

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

$store.state.a // -> moduleA 的状态
$store.state.b // -> moduleB 的状态

参数：

对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象state。
对于模块内部的 getter，根节点状态rootState会作为第三个参数暴露出来，第二个参数是getters

在调用module中的mutation，getters或actions时，直接使用原来的方式。

比如调用mutation直接写$store.commit()，不用使用$store.state.a.commit()

注意store中mutation，getters或actions不要重名，即使是不同的module中

actions调用时 context.commit 提交只能提交到自己module中的mutation

八、vuex文件夹的目录结构划分

以购物车项目为例

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API请求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方，一般state不抽离出来
    ├── getters.js        # 根级别的 getter
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块