当前的调试工具暂时不支持vuex的调试查看，需要我们额外进行log调试，vuex内置了一个logger模块，我们只需要引入并且注册为插件即可
在 src/store/index.js 中加入如下代码:
import { createLogger } from ‘vuex’
plugins: [
createPersistedstate({
key: ‘abc’, // erabbit-client-pc-store
paths: [‘user’, ‘cart’]
}), //这部分是做持久化的
createLogger() // 这个是logger模块
]
首先呢,这个是vuex是如何定义的,在vue2.0中,我们是这样定义的。
import Vue from ‘vue’
import Vuex from ‘vuex’
Vue.use(Vuex)
export default new Vuex.Store({
state:{}, //定义公共数据
mutations:{}, //修改state中的数据
getters:{}, //相当于计算属性,从state中派生出一些状态,当state中的值发生改变的时候,会被重新计算
actions:{}, //发送请求的
modules:{}
})
下面这段代码是Vuex在vue3.0中是怎么定义的,来对比一下不同吧!
import { createStore } from ‘vuex’ // 导入vuex
export default createStore({
state: {
name: ‘小王’,
age: 18
},
mutations: {
update (state, num) {
state.name = ‘xiaoli’
}
},
getters: {
updateState (state) {
return state.age + ‘nihao’
}
},
actions: {
jumpTo (context, age = 20) {
setTimeout(() => {
context.commit(‘update’, age)
}, 3000)
}
},
modules: {
}
})
使用的时候:
在template模板中使用时,vue2.0和vue3.0用法是一样的,在代码中使用的时候是有点小区别的
vue2.0中的使用:
export default {
methods: {
xxx方法名 () {
this.$store.commit()
}
}
}
vue3.0 中的使用:
1.首先先导入vuex
import { useStore } from ‘vuex’ //注意,是useStore不要写错哦,我这里一开始写成userStore..了,
报的错误是Object(…) 不是一个函数
2.这是vuex在vue3.0中是如何使用的
<template>
<div id=”nav”>
<p>{
{$store.state.name}}</p>
<button @click=”mutationsA”>+</button>
</div>
<router-view/>
</template>
<script>
import { useStore } from ‘vuex’
export default {
name: ‘App’,
setup () {
const store = useStore() //记得加这一句
//这一句是使用vuex仓库,我试了一下,注释掉这一句,直接使用useStore会报错
console.log(store.state.name)
console.log(store.getters.newname)
const mutationsA = () => {
store.commit(‘updatename’)
}
return { mutationsA }
}
}
</script>
接下来说一下vuex持久化,vuex是将数据保存到了浏览器的内存中,刷新,数据会丢失。解决办法是把vuex存到本地或者cookie中。
1.准备vuex模块 1.创建modules 2.在store/index.js中引入 (modules下准备几个模块呦!!)
举个例子吧,cart.js
export default {
namespaced: true,
state: () => {
return {
list: []
}
}
}
2.安装vuex-persistedstate插件 npm i vuex-persistedstate
3.如何使用插件来做持久化呢?
store/index.js
import createPersistedstate from ‘vuex-persistedstate’ //第一步导入
export default createStore({
modules: {
xxxx,
xxxx
},
//第二步是加这段代码,默认是存到了localStorage中
plugins: [
createPersistedstate({
key: ‘abc’,
paths: [‘user’, ‘cart’]
})
]
})