当我进行更改时，Vuex 商店不会更新

Question

在我的项目中，在我的 src/store/index.js 文件中，我的 Vuex.store 中有一个带有 cloud_name 属性的 cloudinary 对象：

char str[4][12];

当我转到我的 Vue 文件和控制台日志 cloudinary.cloud_name 时，一切都按预期工作

export default new Vuex.Store({
  plugins: [createPersistedState()],
  state: {
    user: {},
    signupLayout: false,
    adminLayout: false,
    sidebarOpen: false,
    homeLayout: false, 
    cloudinary: {
      cloud_name: "example",
      base_upload_preset: "*****",
      channel_header_upload_preset: "*****",
      profile_image_upload_preset: "*****",
      audio_upload_preset: "*****",
      cover_image_upload_preset: "*****",

但是当我尝试将 cloud_name 更改为“example2”之类的内容时，代码如下所示：

example

当我尝试控制台日志 cloudinary.cloud_name 时，它​​显示的是旧的云名称而不是新的。

export default new Vuex.Store({
  plugins: [createPersistedState()],
  state: {
    user: {},
    signupLayout: false,
    adminLayout: false,
    sidebarOpen: false,
    homeLayout: false, 
    cloudinary: {
      cloud_name: "example2", // change cloud_name
      base_upload_preset: "*****",
      channel_header_upload_preset: "*****",
      profile_image_upload_preset: "*****",
      audio_upload_preset: "*****",
      cover_image_upload_preset: "*****",

为什么要这样做？为什么状态没有改变？

Answer 1

最有可能的问题是您没有以正确的方式改变状态。你有改变你状态的突变吗？

我最喜欢的理解 Vuex 中更新循环的指南是 Adam Jhar's "Vuex Explained Visually"（尽管我不同意将突变名称设为 SHOUTING_SNAKE_CASE）。我最喜欢的部分是这张图片：

简而言之：

• 不要直接改变你的状态
• 通过突变改变状态
• 从 Vuex 操作或直接从组件调用突变

一旦你有了正确的工作流程，你的持久化状态插件之类的东西就可以开始工作了，vue 开发工具将能够观察变化并向你展示有用的东西，你的应用程序将随着状态变化而正确更新。

>

很多人一开始就说“哦，这是很多额外的工作”，他们是对的，但重要的是要以正确的方式去做。