官方资料: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。