写给新手同学的vuex快速上手指北小结


Posted in Javascript onApril 14, 2020

本文介绍了写给新手同学的vuex快速上手指北小结,分享给大家,具体如下

引入

//store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {...},
  mutations: {...},
  actions: {...}
})

export default store

 
//main.js
...
import store from './store'
Vue.prototype.$store = store
const app = new Vue({
  store,...
})
...

//test.vue 使用时:
import {mapState,mapMutations} from 'vuex'

State篇

state更新实时渲染是基于==computed==这个计算属性的,直接赋给data只能赋值初始值,不会随着state改变实时渲染

<!--state改变不会实时渲染-->
export default {
  data() {
   return {
   name:this.$store.state.name,
   };
  },
}
<!--监听state改变重新渲染视图-->
<template>
  <div>
    {{name}}
  </div>
<template>
export default {
  computed: {
   name() {
   return this.$store.state.name;
   }
  },
}

注意: data中的变量如果和computed中的变量重名,data优先,注意命名

获取多个state值,写多个函数return,很繁琐,所以有==mapState==辅助函数

<!--取多个很冗余,繁琐-->
export default {
  computed: {
   token(){
   return this.$store.state.token;
   },
   name(){
   return this.$store.state.name;
   }
  },
}
<!--mapState 直接取出-->
import { mapState } from 'vuex'
export default {
  computed: mapState([
   'token',
   'name'
  ])
}

我们有局部计算,怎么和mapState一起用?

import { mapState } from 'vuex'
export default {
  computed:{
    getTime(){
      return 123;
    },
    ...mapState([
     'token',
     'name'
    ])
  }
}

我们为它起个别名

<template>
  <div>
    xiaokeai,dahuilang是我们取的别名
    token,name是state的值
    {{xiaokeai}}
  </div>
<template>
<script>
  import { mapState } from 'vuex'
  export default {
    computed:{
      ...mapState({
        xiaokeai:"token",
        dahuilang:"name",
      })
    }
  }
</script>

我们要state和data发生点什么

<template>
  <div>
    假如token的值123;
    balabala的值就是 123皮卡皮
    {{balabala}}
  </div>
<template>
<script>
  import { mapState } from 'vuex'
  export default {
    data(){
      return {
        pikaqiu:"皮卡皮卡"
      }
    }
    computed:{
      ...mapState({
        xiaokeai:"token",
        dahuilang:"name",
        // 为了能够使用 `this` 获取局部状态,使用一个自定义名字的函数
        balabala(state){
          return state.token + this.pikaqiu;
        }
      })
    }
  }
</script>

取个对象值怎么破?

<template>
 <div>
 {{daSon}}
 {{xiaoSon}}
 </div>
</template>
<script>
  import { mapState } from 'vuex'
  export default {
    data(){
      return {
        pikaqiu:"皮卡皮卡"
      }
    }
    computed:{
      ...mapState({
  daSon: state=>state.obj.yeye.baba.daSon,
  xiaoSon:state=>state.obj.yeye.baba.xiaoSon,
 })
    }
  }
</script>

这种方式取对象写到业务里不直观,也不共用,下节==Getter==有更优的方案

Getter篇

Getter是针对state的【对象】值提前做一些处理,以便用的时候直接提取

可以 this.$store.getters.xxx 使用,也可以使用mapGetters辅助函数,==辅助函数注意:== 和state一样,注入在computed中

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
 state: {
 obj: {
  yeye: {
  baba: {
   daSon: "老大",
   xiaoSon: "老二"
  }
  }
 }
 },
 getters: {
    <!--将想要提取或者处理的值这里处理好-->
 getson: state => {
  return state.obj.yeye.baba;
 }
 }
})

export default store

<!--用的时候,和state一样,也可以别名等等操作-->
<template>
 <div>
    {{getson}}
 </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
 computed: {
  ...mapGetters([
    getson
  ])
 }
}
</script>

Mutation篇

操作: this.$store.commit("名字","值");

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
 state: {
 token: "vuex的token",
 },
 mutations: {
 setToken(state, val) {
  state.token = val;
 }
 }
})

export default store

mapMutations 辅助函数,和state一样,可以别名, ==注意:== 辅助函数注入在methods中

methods: {
  ...mapMutations([
   'setToken'
  ])
 }
 
 <!--使用-->
 this.setToken(100); //token修改为100

Mutation 必须是同步函数,不要误解这句话,以为异步不能用,异步可以用在里面,视图的渲染,取值都没有问题,问题在于:调试的时候,一些浏览器调试插件不能正确监听state。所以方便调试,尽量将异步写入action中

Action篇

注意action的 参数不是 state ,而是context,context里面包含commit,state。基本操作:this.$store.dispatch("函数名","值")

const store = new Vuex.Store({
 state: {
  count: 0
 },
 mutations: {
  increment (state) {
   state.count++
  }
 },
 actions: {
  increment (context) {
   context.commit('increment')
  }
 }
})

<!--辅助函数操作 注入在methods中-->
import { mapActions } from 'vuex'

export default {
 methods: {
  ...mapActions([
    "increment"
  ])
 }
}

<!--使用-->
this.increment(123);

module篇

module 目的将store按功能拆分成多个文件,利于维护管理,module 分为2种情况,1.是有命名空间, 2.是没有命名空间

没有命名空间: action、mutation 和 getter 是注册在全局的,所以要注意,方法函数不要设置同名了,如果同名了会都执行。
stete例外是局部。

import Vue from 'vue';
import Vuex from 'vuex';
import moduleA from "./modules/cat.js";
Vue.use(Vuex);
const store = new Vuex.Store({
 state: {
 token: "vuex的token",
 },
 modules:{
 moduleA
 }
})

export default store;

<!--moduleA.js-->
export default {
 // namespaced: true,
 state: {
  cat:"我是cat",
 },
 mutations: { 
 setCat(state, val) {
  state.cat = val;
 } 
 },
 actions: { 
   
 },
 getters: { 
   
 }
};

无命名空间 取值

this.$store.state.moduleA.cat
或者
...mapState({
 cat:state=>state.moduleA.cat,
}),

不可以(state是局部,不可以这么取):
...mapState([
  "cat"
]),

无命名空间 改变值

和原来一样,因为方法是注册在全局的
this.$store.commit("setCat",666);
或者
...mapMutations([
 "setCat"
])

有命名空间: state, action、mutation 和 getter 是局部的,模块间命名互相不冲突,可以重名。
namespaced 设置为true,即可开启

<!--moduleA.js 文件-->
export default {
 namespaced: true,
 state: {
  cat:"我是cat",
 }
}

有命名空间取值

this.$store.state.moduleA.cat

或者
<!--注意这里:命名空间的名字带上,在modules注册时候呢个key值-->
<!--也可以别名,方法和之前一样,就是第一个参数是空间名-->
...mapState("moduleA",[
  "cat"
])

有命名空间 改变值

<!--只是第一个参数是空间名,其他操作一样-->
...mapMutations("moduleA",[
 "setCat"
])
this.setCat(888);

或者:

this.$store.commit("moduleA/setCat",666);

最后 plugins

vuex页面刷新会丢失数据,用vuex-persistedstate插件可解决

import createPersistedState from "vuex-persistedstate";

const store = new Vuex.Store({
 state: {},
 mutations: {},
 actions: {},
 getters: {},
 modules:{},
  plugins: [
    createPersistedState({
      storage: window.sessionStorage
    })
  ]
})

export default store

到此这篇关于写给新手同学的vuex快速上手指北小结的文章就介绍到这了,更多相关vuex快速上手内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Ruffy javascript 学习笔记
Nov 30 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
Nov 22 Javascript
开发中可能会用到的jQuery小技巧
Mar 07 Javascript
JS嵌套函数调用上下文的问题解决
Mar 26 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
Apr 30 Javascript
超链接怎么正确调用javascript函数
May 23 Javascript
AngularJS实现ajax请求的方法
Nov 22 Javascript
探究JavaScript中的五种事件处理程序方式
Dec 07 Javascript
ES6数组的扩展详解
Apr 25 Javascript
vue 配置多页面应用的示例代码
Oct 22 Javascript
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
AJAX实现省市县三级联动效果
Oct 16 Javascript
vue-cli设置publicPath小记
Apr 14 #Javascript
vue 实现用户登录方式的切换功能
Apr 14 #Javascript
react 不用插件实现数字滚动的效果示例
Apr 14 #Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
Apr 14 #Javascript
编写一个javascript元循环求值器的方法
Apr 14 #Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
Apr 14 #Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 #Javascript
You might like
JS实现php的伪分页
2008/05/25 PHP
PHP高级OOP技术演示
2009/08/27 PHP
Win下如何安装PHP的APC拓展
2013/08/07 PHP
浅析ThinkPHP中的pathinfo模式和URL重写
2014/01/06 PHP
php格式化金额函数分享
2015/02/02 PHP
PHP使用file_get_content设置头信息的方法
2016/02/14 PHP
Thinkphp实现站点静态化的方法详解
2017/03/21 PHP
JavaScript进阶教程(第四课第一部分)
2007/04/05 Javascript
js apply/call/caller/callee/bind使用方法与区别分析
2009/10/28 Javascript
JS往数组中添加项性能分析
2015/02/25 Javascript
基于jquery实现表格无刷新分页
2016/01/07 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
2016/09/16 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
2017/01/03 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
2017/01/13 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
2017/12/11 Javascript
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
2018/02/24 jQuery
React中阻止事件冒泡的问题详析
2019/04/12 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
在Vue项目中使用Typescript的实现
2019/12/19 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
详解Python中的元组与逻辑运算符
2015/10/13 Python
用十张图详解TensorFlow数据读取机制(附代码)
2018/02/06 Python
Django 连接sql server数据库的方法
2018/06/30 Python
Python代码实现http/https代理服务器的脚本
2019/08/12 Python
Python图片的横坐标汉字实例
2019/12/04 Python
python中有帮助函数吗
2020/06/19 Python
基于python实现计算两组数据P值
2020/07/10 Python
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
Footshop法国:购买运动鞋
2020/01/19 全球购物
大学生求职自荐信
2013/12/12 职场文书
委托证明书
2014/09/17 职场文书
2014年中学生检讨书大全
2014/10/09 职场文书
预备党员转正材料
2014/12/19 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
高中体育课教学反思
2016/02/16 职场文书