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 的值
原文地址：https://www.cnblogs.com/langzianan/p/9306397.html
时间： 2024-10-05 22:01:40