苏州h5网站建设价钱,中国十大服装设计公司,网站策划是干嘛的,百川互联参考文档(点击查看) 好处 1.数据的存取一步到位#xff0c;不需层层传递 2.数据的流动非常清晰 3.存储在Vuex中的数据都是响应式的#xff08;数据更新后#xff0c;使用数据的组件都会自动更新#xff09;
Vuex基础配置
npm i vuex3.6.2state中用来存储数据#xff0c…参考文档(点击查看) 好处 1.数据的存取一步到位不需层层传递 2.数据的流动非常清晰 3.存储在Vuex中的数据都是响应式的数据更新后使用数据的组件都会自动更新
Vuex基础配置
npm i vuex3.6.2state中用来存储数据组件中直接使用 语法$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(方法名,方法的第二个参数方法的第三个参数...)actionsmutation是修改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计算属性时都需要加模块名指出是哪个模块中的东西 参考文章
