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。