欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

简单的vuex 的使用案例笔记

程序员文章站 2023-10-18 12:28:15
1、 npm install vuex 2、 在src 下 新建文件夹 store (为什么是这个单词,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; ....};

截图如下:

简单的vuex 的使用案例笔记

默认方式:

如上图显示。默认的是,白天的模式,classname 是 morning;

  点击事件触发模式;

简单的vuex 的使用案例笔记

再次点击的时候,可以在改回来,这个窍门,就是 index.js 里面,increment 对 night 的变量 取 对 的一个逻辑方法。跟jq 里面的 toggle,类似

简单的vuex 的使用案例笔记

结束语:

简单的vuex 的案例 ,做个笔记。希望对大家有所帮助