Vuex的五大特性。

vuex一般用于单页应用、加入购物车、音乐播放器、组件之间的状态、登录状态。

state
就是一个仓库,数据源的存放处。
它是响应式的,如果从组件里获取数据,数据源发生改变,组件也随之发生改变。

getter
可以对state进行操作,相当于state数据的计算属性。
也可以在组件中复用。

mutation
同步执行。修改state数据的唯一途径。直接变更state状态。

action
可以包含异步操作。不能直接操作state,需要通过提交mutation来修改state数据。
用于异步请求,业务代码。

如果业务复杂不用vuex的话,可维护性下降,
要修改数据要改三个地方,可读性也下降。
会让耦合性增加。

耦合性指模块间相互联系紧密程度的一种度量。
耦合性越强,独立性越差。

### Vuex Namespaced 模块使用教程 #### 一、Namespaced 属性介绍 设置 `namespaced` 为 `true` 的作用在于告知 Vuex,当前模块内的所有状态 (`state`)、变异 (`mutations`) 和操作 (`actions`) 调用时都需附加特定前缀——即此模块导入时所赋予的名字[^1]。 #### 二、解决命名冲突问题 通过开启命名空间功能可以有效防止多个模块间可能出现的状态名称重复现象,在大型项目或者团队协作开发过程中尤为重要。一旦设置了 `namespaced: true` ,那么在访问这些属性的时候就必须指明具体的模块路径[^2]。 #### 三、配合辅助函数使用 当启用了命名空间特性后,任何对于该模块下的 getters, actions 或 mutations 的调用都应该带上完整的命名空间路径。比如在一个名为 'login' 的模块里定义了一个 action,则外部触发它的方式应该是 `'login/actionName'` 形式[^3]。 #### 四、具体实现案例 下面是一个简单的例子来展示如何配置并利用带有命名空间特性Vuex 模块: ```javascript // store/modules/user.js 文件内容如下: const userModule = { namespaced: true, state() { return { name: '' } }, mutations: { setName(state, payload){ state.name = payload; } }, actions:{ updateName(context,payload){ context.commit('setName',payload); } } } export default userModule; // main.js 中创建 Store 实例部分代码片段: import Vue from 'vue'; import Vuex from 'vuex'; import user from './store/modules/user'; Vue.use(Vuex); new Vuex.Store({ modules: { user:user } }); // 组件内部提交mutation或dispatch action的方法演示: methods: { changeUserName(){ this.$store.dispatch('user/updateName','张三'); } } ``` 上述实例展示了怎样声明一个具有命名空间特性Vuex 子模块,并说明了如何按照规定格式去调用其内部方法[^4]。 #### 五、实际应用场景举例 假设有一个场景是在用户登录成功之后更新用户的个人信息到全局存储中,此时就可以像这样写入数据:`this.$store.commit("userInfo/setUserInfo", userInfo)` 。这里 `"userInfo"` 就是指定了目标模块的命名空间[^5]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值