解决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 相关文章推荐
让网页根据不同IE版本显示不同的内容
Feb 08 Javascript
jquery 分页控件实现代码
Nov 30 Javascript
jquery常用方法及使用示例汇总
Nov 08 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
Aug 21 Javascript
jquery mobile 移动web(5)
Dec 20 Javascript
JavaScript排序算法动画演示效果的实现方法
Oct 18 Javascript
vue-router 学习快速入门
Mar 01 Javascript
Vue.js简易安装和快速入门(第二课)
Oct 17 Javascript
浅谈Vue SPA 首屏加载优化实践
Dec 15 Javascript
JavaScript中常见内置函数用法示例
May 14 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
vue 微信分享回调iOS和安卓回调出现错误的解决
Sep 07 Javascript
超详细的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
香妃
2021/03/03 冲泡冲煮
在PHP中使用灵巧的体系结构
2006/10/09 PHP
php序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
php中smarty实现多模版网站的方法
2015/06/11 PHP
ThinkPHP和UCenter接口冲突的解决方法
2016/07/25 PHP
PHP mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
php指定长度分割字符串str_split函数用法示例
2017/01/30 PHP
PHP基于mcript扩展实现对称加密功能示例
2019/02/21 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
User Scripts: Video Download by User Scripts
2007/05/14 Javascript
jquery关于图形报表的运用实现代码
2011/01/06 Javascript
JavaScript取得鼠标绝对位置程序代码介绍
2012/09/16 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
微信小程序开发入门基础教程
2017/04/19 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
2017/07/07 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
2018/11/05 Javascript
Koa日志中间件封装开发详解
2019/03/09 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
2020/02/09 Javascript
Python实现的rsa加密算法详解
2018/01/24 Python
python OpenCV学习笔记直方图反向投影的实现
2018/02/07 Python
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
Python subprocess模块常见用法分析
2018/06/12 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
python pytest进阶之xunit fixture详解
2019/06/27 Python
python实现集中式的病毒扫描功能详解
2019/07/09 Python
python 遍历pd.Series的index和value
2019/11/26 Python
阿迪达斯俄罗斯官方商城:adidas俄罗斯
2017/03/08 全球购物
StubHub西班牙:购买和出售全球活动门票
2017/06/05 全球购物
高尔夫球鞋、服装、手套和装备:FootJoy
2018/12/15 全球购物
拓展培训心得体会
2014/01/04 职场文书
2014年健康教育实施方案
2014/02/17 职场文书
餐厅周年庆活动方案
2014/08/25 职场文书
具结保证书
2015/01/17 职场文书
企业宣传语大全
2015/07/13 职场文书
幼儿教师三分钟演讲稿
2019/06/21 职场文书
pytorch 运行一段时间后出现GPU OOM的问题
2021/06/02 Python