createStore
createStore来创建vuex实例
使用 useStore
const store = useStore()
使用state:store.state.username
使用getters:store.getters.newName
使用mutations: store.commit('updateName')
使用actions:store.dispatch('updateName')
module
存在两种情况
- 默认的模块,`state` 区分模块,其他 `getters` `mutations` `actions` 都在全局。
使用state:store.state.a.username
使用getters:store.getters.changeName
- 带命名空间 `namespaced: true` 的模块,所有功能区分模块,更高封装度和复用。
使用state:store.state.b.username
使用getters:store.getters['b/changeName']
使用mutations: store.commit('b/updateName')
使用actions:store.dispatch('b/updateName')
vuex持久化
npm i vuex-persistedstate
import createPersistedstate from 'vuex-persistedstate'
plugins: [
createPersistedstate({
key: 'erabbit-client-pc-store',
paths: ['user', 'cart']
})
]
使用:
<!-- 修改数据,测试是否持久化 -->
App {{$store.state.user.profile.account}}
<button @click="$store.commit('user/setUser',{account:'zhousg'})">设置用户信息</button>