本文主要是介绍Vuex(vue 项目中实现 频繁、大范围数据共享的技术方案)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
参考文档(点击查看)
好处
1.数据的存取一步到位，不需层层传递
2.数据的流动非常清晰
3.存储在Vuex中的数据都是响应式的（数据更新后，使用数据的组件都会自动更新）
Vuex基础配置
npm i vuex@3.6.2
state中用来存储数据，组件中直接使用 语法：$store.state.变量名
vuex配置成功的标志
getters是Vuex中的计算属性（与state同级）(和组件中的计算属性一样，但是不支持set修改)
getters的基本使用
借助辅助方法使用state和getters(简写，当成组件的属性、方法使用)
参考文章
mutations更新数据(要开启严格模式，防止小白直接在组件中修改数据)（修改state数据的唯一途径）(mutations所有方法不支持异步更新，actions用来处理异步任务)
基本使用
举例
在组件中通过@click="变量++"
这样的修改方法修改变量的值时，vue调试工具容易抓取不到
const store = new Vuex.Store({/* 这里配置Vuex */// 开启vuex的严格模式，就绝对的不允许在组件中直接修改 state 数据；如果修改就报错strict: true, state: {age: 20,username: 'zhangsan'},mutations: {updateAge(state, newVal) {// 第1个参数state是固定的，表示前面的state对象，通过它可以方便的找到state中的数据// 第2个参数及后续参数，需要调用时传递进来state.age = newVal}}
})
调用mutation方法的语法
<button @click="$store.commit('方法名',方法的第二个参数，方法的第三个参数...)"
actions（mutation是修改state数据的唯一途径，不能在actions里修改state数据，可以通过传入stroe对象，stroe对象调用mutation方法修改state数据）
基本使用
调用actions方法的语法
<button @click="$store.dispatch('方法名',方法的第二个参数，方法的第三个参数...)"
分模块（将store的index.js文件进行拆分）
通过 modules 可以 以模块化的方式存储数据。
实际开发中，在Vuex中存储的数据可能比较多，如果把全部数据、方法、计算属性都放到 src/store/index.js 中，无疑很难维护。
我们可以分门别类的将数据存储到不同的模块中：
比如将 任务列表相关数据、方法存储到 src/store/todo.js 中
比如将 用户相关数据、方法存储到 src/store/user.js 中
…
这样，更加利用数据的维护，更适合大项目。
|- src|- store|- modules|- cart.js 购物车数据、方法|- todo.js 放任务列表数据|- ......|- index.js vuex的入口，导入 cart.js 和 todo.js，注册为模块模块文件要开启命名空间，可以解决不同模块之间成员名称冲突的问题。
组件中调用 state数据、mutations方法、actions方法、getters计算属性时，都需要加模块名（指出是哪个模块中的东西）
这篇关于Vuex(vue 项目中实现 频繁、大范围数据共享的技术方案)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
