vuex 更新总结

101 阅读1分钟

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>