简单的vuex 的使用案例笔记
1、 npm install vuex
2、 在src 下 新建文件夹 store （为什么是这个单词，vuex 是用来状态管理的，用储存一些组件的状态，取存贮,仓库之意），store 文件下 新建文件 index.js (为什么是index.js？ 在导入的时候，会第一选择这个叫index的文件)
3、 index.js import 导入 vue 和vuex (import 是es6 的语法， es5 是 require), 代码如下：
这里的demo 是一个 改变 app 的模式 的一个appellation ，选择是 夜间模式还是白天模式
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
night: true,
text: '白天',
className: 'morning'
},
mutations: {
increment (state) {
state.night = !state.night;
state.text = state.night === true ? '晚上' : '白天';
state.className = state.night === true ? 'night' : 'morning';
}
}
})
4、 main.js import 这个index.js 代码如下：
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store' // 会找index.js
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store, // 注入根组件，其他子组件 都可以引用
template: '<App/>',
components: { App }
})
5、使用vuex 的状态
组件1:
dom :
<div class="header" :class="model">
js
computed: {
model() {
return this.$store.state.className // 是ninght 还是 morning
}
},
注意：
:class="model" 这个class 可以绑定一个方法传参数，可以直接用 js 表达式，可以绑定一个计算属性
组件2:
dom:
<div class='modal' @click="changeModel">
<div class="avatar">
<img src="../../assets/img/logo.png" width="18" height="18">
</div>
<div class="name">
{{currentModel}}
</div>
<!-- vuex 相当于全局注入 vuex 然后取这里面的值 -->
</div>
js:
computed: {
currentModel () {
return this.$store.state.text
}
},
methods: {
changeModel () {
// document.body.className='night'
this.$store.commit('increment')
}
}
注意：
js 中的 currentModel 和 dom 中的 {{ currentModel }} 是一个，和 :class 可以跟表达方法一样 ，可以跟变量 ,表达方法 ,表达式 （ 这里灵活的模版方法，回头查看下源码，然后补充这的说明， vue模版为何如此强大！）
点击事件，触发方法 changeModel ，changeModel 触发 mutation 的方法，显示改变 值 ，这个是固定的语法， this.$store.commit('increment');
increment 可以在定义的时候，设置参数，传参数， this.$store.commit('increment', 'argumnet') , 在 mutation 里面 increment (state , arg) { .. = arg; ....};
截图如下：
默认方式：
如上图显示。默认的是，白天的模式，className 是 morning；
点击事件触发模式；
再次点击的时候，可以在改回来，这个窍门，就是 index.js 里面，increment 对 night 的变量 取 对 的一个逻辑方法。跟jq 里面的 toggle，类似
结束语：
简单的vuex 的案例 ，做个笔记。希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要为大家详细介绍了Vue列表页渲染优化的操作，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
有时候不希望已经请求过的数据,再次请求重复执行刷新操作,我们就需要使用数据缓存,这篇文章主要给大家介绍了关于如何巧用Vue缓存函数的相关资料,需要的朋友可以参考下2021-09-09
这篇文章主要介绍了Vue3路由页面切换动画animate.css效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-09-09
watch 函数用来侦听特定的数据源,并在回调函数中执行副作用,下面这篇文章主要给大家介绍了关于Vue3中watch监听使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了Vue学习-VueRouter路由基础,路由本质上就是超链接,xiamian 文章围绕VueRouter路由的相关资料展开详细内容，需要的小伙伴可以参考一下，希望对你的学习有所帮助2021-12-12
这篇文章主要为大家详细介绍了vue实现简单的分页功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了Vue Router中Matcher的初始化流程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了Vue pinia模块化全局注册，Pinia是Vue.js团队成员专门为Vue开发的一个全新的状态管理库，并且已经被纳入官方github2023-02-02
vue全局引入公共的scss和@mixin与@include的使用方式
这篇文章主要介绍了vue全局引入公共的scss和@mixin与@include的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
这篇文章主要介绍了Vue创建浅层响应式数据的实例,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-11-11
最新评论