vuex 入坑篇

Posted 2020-12-04 langzianan

Vuex 是什么？

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

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

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

 

首先使用 npm 安装 Vuex

npm install vuex -S /cnpm install vuex -S

 

一般vuex的文件结构如下

 保存在store文件夹下

• index.js,更多的都命名为store.js，这不重要

　　　Vuex 中 Store 的模板化定义如下

• state.js

  相当于数据库,定义了应用数据的数据结构及初始状态

• getters.js

  就是获取state中状态，仅单向的获取数据，不做任何修改。

• mutation-types.js

  这个脚本下存放的都是一些vuex常用的变量

  当然这个不是必须的，也可以没有，那么为什么要建一个这样的文件呢？

  原因是便于书写方便和一个eslink工具等帮我们检测一些错误的；

• mutations.js

  定义state数据的修改操作

  从图上可以看出mutation-types定义的变量在这里得到了应用

• actions.js

  调用mutation方法对数据进行操作,

  这里可以对数据进行一些复杂的操作，mutations中只是简单的数据操作

 

在main.js中引入vuex

import Vue from ‘vue‘
import App from ‘./App‘
import Vuex from ‘vuex‘
import store from ‘./vuex/store‘

Vue.use(Vuex)

/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
  store,
  render: h => h(App)
})

构建核心仓库 store.js

import Vue from ‘vue‘
import Vuex from ‘vuex‘

Vue.use(Vuex)

const store = new Vuex.Store({
  // 定义状态
  state: {
    author: ‘Wise Wrong‘
  }
})

export default store    // 把这个变量映射出去

这样就可以在组件页面通过this.$store.state.author 获取到这个状态

主要在 computed 中，将 this.$store.state.author 的值返回给 html 中的 author

<template>
   <div>
     {{author}}
 
   </div>

</template>

在组件页面就可以直接获取到这个变量值

页面渲染之后，就能获取到 author 的值