vuex的应用及理解

官方资料:Vuex 是什么? | Vuex

1.安装:

npm install vuex --save

2.引入,modules多个子文件,在index.js中引入所有modules中的js文件

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

Vue.use(Vuex)

// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', true, /\.js$/)

// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

const store = new Vuex.Store({
  modules,
  getters
})

export default store

 3.main.js中挂载

4.状态管理文件数据处理

const allObj = {
    namespaced: true,
    state: { //声明变量
        testData: {
            count: 10,
            age: 30,
            token: ''
        }
    },
    mutations: {//修改state中的变量,t:封装创建的变量,如果是多个变量同步处理
        SET_TESTDATA: (state, t) => {
            state.testData = { ...state.testData, newProp: t }
            // 这里可结合sessionStorage持久化数据
            // sessionStorage.setItem('testData', JSON.stringify(state.testData))
            // 操作对象如果需要更新视图使用 this.$set( target, key, value )方法
            // 🌹 target:要更改的数据源(可以是对象或者数组)
            // 🌹 key:要更改的具体数据
            // 🌹 value :重新赋的值
        }
    },
    actions: { 
    //提交mutations, action中可以引入接口获取数据(比如登录后缓存token等),提交给mutations
    //actions中为异步操作
        setTestData({ commit }, t) {
            commit('SET_TESTDATA', t)
        }
    },
    getters: {//封装state中的变量,页面通过计算属性中的mapGetters获取
        getTestData(state) {
            return state.testData
        }
    }
}
export default allObj

 5.页面中使用及修改

// 使用
computed: {
    //FileName,store中对应js文件的文件名,testData引用的变量,getTestData:getters中对应封装的    
    getter方法
    ...mapGetters('FileName',{ testData: 'getTestData' })
},
//更新数据
methods: {
    updateData() {
        console.log(this.testData)
        let obj = { key1: 'newValue1', key3: 'value3' };  
        this.$store.commit('testData', { ...obj });
    }
}

6.vuex存储与本地储存(localstorage、sessionstorage)的区别!

1.区别:vuex存储在内存,localstorage(本地存储)则以文件的方式存储在本地,永久保存(不主动删除,则一直存在);sessionstorage( 会话存储 ) ,临时保存。localStorage和sessionStorage只能存储字符串类型,对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理

2.应用场景:vuex用于组件之间的传值,localstorage,sessionstorage则主要用于不同页面之间的传值。

3.永久性:当刷新页面(这里的刷新页面指的是 --> F5刷新,属于清除内存了)时vuex存储的值会丢失,sessionstorage页面关闭后就清除掉了,localstorage不会。

注:大家可能觉得用localstorage可以代替vuex, 对于不变的数据确实可以,但是当两个组件共用一个数据源(对象或数组)时,如果其中一个组件改变了该数据源,希望另一个组件响应该变化时,localstorage,sessionstorage无法做到,原因就是区别1。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

木易66丶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值