解决vuex刷新状态初始化的方法实现


Posted in Javascript onAugust 15, 2019

vuex五种基本对象

  • state:存储状态(变量)
  • getters:对数据获取之前的再次编译,可以理解为state的计算属性。我们在组件中使用$sotre.getters.fun()
  • mutations:修改状态,并且是同步的。在组件中使用$store.commit('',params)。这个和我们组件中的自定义事件类似。
  • actions:异步操作。在组件中使用是$store.dispath('')
  • modules:store的子模块,为了开发大型项目,方便状态管理而使用的。这里我们就不解释了,用起来和上面的一样。
npm install vuex -S // 安装vuex

src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import temp from '@/store/modules/temp'

Vue.use( Vuex ); // 挂载在vue

const store = new Vuex.Store({
  modules: {
    temp,
  }, state: {

  }, getters: {

  }, mutations: {

  },
});

export default store; // 抛出

src/store/modules/temp.js

const Storage = sessionStorage
const tempInfo = {
  state: { // 设置全局访问的state对象
    tempData: Storage['SET_TEMP_DATA'] ? JSON.parse(Storage['SET_TEMP_DATA']) : {}, // 设置初始化的值(Storage中是否存在,存在则获取,不存在则默认赋值{})
  }, mutations: { // 自定义改变state初始值的方法,这里面的参数除了state之外还可以再传额外的参数(变量或对象);
    SET_TEMP_DATA(state, tempData) {
      state.tempData = tempData
    },
  }, actions: {
    SetData({ commit }, tempData) {
      commit('SET_TEMP_DATA', tempData); // 同步操作
      Storage.setItem('SET_TEMP_DATA', JSON.stringify(tempData))
    }
  }, getters: { // 实时监听state值得变化(最新状态)
    tempData: (state) => {
      return state.tempData
    }
  }
}
export default tempInfo;

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from '@/store/index' //vuex 状态管理

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 store, // 使用store
 components: { App },
 template: '<App/>'
})

src/index.vue

<template>
 <div class="move-forward">
   <div @click="click">点击改变vuex值</div>
</template>
<script>
  export default {
    methods: {
      click() {
        let aa = this.$store.getters.tempData.aaa*1
        this.$store.dispatch('SetData', {"aaa": aa += 1})
      },
    }
  }
</script>

其他

当然还可以使用vuex-persistedstate、vuex-along等这些第三方插件。

npm i -S vuex-persistedstate或npm i -S vuex-along
import Vue from 'vue'
import Vuex from 'vuex'
import temp from '@/store/modules/temp'
import createPersistedSatte from 'vuex-persistedstate' // 引入

Vue.use( Vuex );

const store = new Vuex.Store({
  modules: {
    temp,
  }, state: {

  }, getters: {

  }, mutations: {

  },
  plugins: [createPersistedSatte()], // 挂载插件
});

export default store

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js png图片(有含有透明)在IE6中为什么不透明了
Feb 07 Javascript
JavaScript实现快速排序的方法
Jul 31 Javascript
基于Jquery实现表单验证
Jul 20 Javascript
ES6所改良的javascript“缺陷”问题
Aug 23 Javascript
Angular2学习笔记——详解NgModule模块
Dec 02 Javascript
js实现自定义路由
Feb 04 Javascript
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
vue 父组件调用子组件方法及事件
Mar 29 Javascript
浅谈Vue组件单元测试究竟测试什么
Feb 05 Javascript
如何基于filter实现网站整体变灰功能
Apr 17 Javascript
JS图片预加载三种实现方法解析
May 08 Javascript
vue3种table表格选项个数的控制方法
Apr 14 Vue.js
超详细的5个Shell脚本实例分享(值得收藏)
Aug 15 #Javascript
koa2+vue实现登陆及登录状态判断
Aug 15 #Javascript
原生js实现的移动端可拖动进度条插件功能详解
Aug 15 #Javascript
快速对接payjq的个人微信支付接口过程解析
Aug 15 #Javascript
Element-UI中关于table表格的那些骚操作(小结)
Aug 15 #Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
Aug 15 #Javascript
js设计模式之单例模式原理与用法详解
Aug 15 #Javascript
You might like
php 无限级分类学习参考之对ecshop无限级分类的解析 带详细注释
2010/03/23 PHP
PHP性能优化准备篇图解PEAR安装
2011/12/05 PHP
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
PHP 将数组打乱 shuffle函数的用法及简单实例
2016/06/17 PHP
浅谈PHP各环境下的伪静态配置
2019/03/13 PHP
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
2010/05/27 Javascript
多个js与css文件的合并方法详细说明
2012/12/26 Javascript
jQuery判断checkbox是否选中的3种方法
2014/08/12 Javascript
jQuery固定浮动侧边栏实现思路及代码
2014/09/28 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
浅谈JQ中mouseover和mouseenter的区别
2016/09/13 Javascript
在html中引入外部js文件,并调用带参函数的方法
2016/10/31 Javascript
Vue从TodoList中学父子组件通信
2019/02/05 Javascript
angular 实现下拉列表组件的示例代码
2019/03/09 Javascript
JS实现横向轮播图(初级版)
2020/06/24 Javascript
深入理解javascript中的this
2021/02/08 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
Python文档生成工具pydoc使用介绍
2015/06/02 Python
你眼中的Python大牛 应该都有这份书单
2017/10/31 Python
Python当中的array数组对象实例详解
2019/06/12 Python
Python批量查询关键词微信指数实例方法
2019/06/27 Python
Python实现投影法分割图像示例(二)
2020/01/17 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
HTML5 File API改善网页上传功能
2009/08/19 HTML / CSS
BNKR中国官网:带你感受澳洲领先潮流时尚
2018/08/21 全球购物
Farfetch阿联酋:奢侈品牌时尚购物平台
2019/07/26 全球购物
村干部培训班主持词
2014/03/28 职场文书
医药营销个人求职信
2014/04/12 职场文书
幼儿教师师德师风自我剖析材料
2014/09/29 职场文书
2014年污水处理厂工作总结
2014/12/19 职场文书
用Python简陋模拟n阶魔方
2021/04/17 Python
golang生成并解析JSON
2022/04/14 Golang
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers