Vuex深入解读(适用于Vue2)

Posted 2023-05-04

参考技术A

Vuex是Vue官方推出的 一个 状态管理工具，其能生成一个单独的全局状态实例，其有以下特点：

注意事项 ：版本号在3.6.2以下的vuex适用于vue2，若在vue2的工程项目中直接 npm i vuex -s 会报如下的错误

解决办法是指定版本号，vue2使用的版本目前最高支持到3.6.2，具体可在 更新记录 中进行查阅。

State相对于vuex来说就好比vue组件中的data，所以声明state必须是 纯粹的对象 (含有零个或多个的 key/value 对) ，在建立后，State数据会被转换为响应式的数据。

首先定义一个store，里面只包含State，然后我们将其注入到全局，下面一次进行以上三种形式的测试

1.在vue组件中访问

注:由于不能修改store数据，所以一般不建议在data中访问store的数据，因为它没有缓存效果，一般在计算属性中获取state数据。

mapState 语法糖的主要作用是将store中的state映射到当前vue实例的computed中

在没有 mapState 时，我们获取state一般在computed中进行获取，对于获取多个state数据，那么我们就要写多个computed方法，如下

针对于写多个computed的繁琐和冗余，使用 mapState 可以帮助我们生成 计算属性 。

当映射的计算属性的名称与 state 的数据名称相同时，我们也可以给 mapState 传一个字符串数组。

mapState 返回的是一个对象，如果computed只包括 mapState ，那么直接写

如果你的computed还有其它store之外的属性，那么你需要使用剩余运算符，把mapState返回的对象和其它计算属性对象合并

Vuex 计算属性仅适用于 getter

【中文标题】Vuex 计算属性仅适用于 getter

【英文标题】：Vuex computed properties only work with getters

【发布时间】：2018-07-22 23:54:53

【问题描述】：

当我把它放在我的 Vue 组件中时......

// using store getter

computed: 
  authenticated() 
    return this.$store.getters.authenticated
  

...它的工作原理。 authenticated 的值是响应式的，当 vuex 存储中的值为 true 时，计算属性返回 true。

这应该可行...（根据文档，这将是正确的方法）

// using store state

computed: 
  authenticated() 
    return this.$store.state.authenticated
  

...但没有。计算的属性始终为false。

它甚至在初始状态下都不起作用，所以我猜它与动作或突变无关。 vuex 存储在 state 和 getters (Firefox Vue DevTools) 中保存正确的值。

我的商店是这样的：

const state = 
    authenticated: authenticate.isAuthenticated(),
;

const getters = 
    authenticated () 
        return state.authenticated
    
;

const mutations = 
    isAuthenticated (state, isAuthenticated) 
        state.authenticated = isAuthenticated
    
;

因此，它适用于 store getter，但不适用于 store state。 Afaik 商店状态也应该是反应式的。

知道我做错了什么吗？

【问题讨论】：

它有什么作用？ “不起作用”是含糊的。

Getter 接受状态作为参数。你的吸气剂应该是authenticated(state) return state.authenticated。

您是否将状态与 getter、actions 和 mutators 一起导出？

@RoyJ 你是对的，我更新了问题，希望问题现在更清楚了。

@Sletheren 是的，我愿意。

【参考方案1】：

我认为问题不在于使用 getter 或状态。由于 state 运行正确，getter 应该做同样的事情，因为它指向 state。您是否从商店中导出了吸气剂？这似乎是可能的问题。如前所述，使用 vuex getter 时应该将 state 作为参数传递

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【参考方案2】：

const state = 
   authenticated: authenticate.isAuthenticated(),
;

状态是一个对象。对象中的属性试图调用函数的结果。这可能是问题所在，因为它会要求对象调用函数。尝试先将其设置为固定值，并在需要时通过调用突变来更改状态值。

您也可以尝试调用 js 对象函数调用状态对象内的 authenticate.isAuthenticated() 函数。 详情在这里：https://www.w3schools.com/js/js_function_call.asp

可能的解决方案：

const state = 
   authenticated: function() return authenticate.isAuthenticated() ,
;

【参考方案3】：

除了本次讨论之外，vuex 还提供了 mapGetters、mapState、mapActions 和 mapMutations 辅助函数。

在 authenticated getter 的情况下，您可以像这样映射它：

import  mapGetters  from 'vuex

computed: 
    ...mapGetters(
        authenticated: 'authenticated'
    )

有助于保持代码简洁明了，imo。

【参考方案4】：

假设您像我在下面那样构建您的 Vuex.Store，使用 state.authenticated 或 getters.authenticated 计算的结果将按预期工作。

突变部分没有任何区别，因此我将其取出以使事情最小化。

正如 Bert 所说，你的 getter 应该将 state 作为参数；否则，它使用声明的const，在这种情况下是相同的，但具有欺骗性。

const authenticate = 
  isAuthenticated() 
    return true;
  
;

const state = 
    authenticated: authenticate.isAuthenticated()
;

const getters = 
    authenticated (state) 
        return state.authenticated;
    
;

const store = new Vuex.Store(
  state,
  getters
);

new Vue(
  el: '#app',
  store,
  computed: 
    authenticated() 
      return this.$store.state.authenticated;
    
  
);

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<script src="//unpkg.com/vuex@latest/dist/vuex.js"></script>
<div id="app">
  Anything? authenticated
</div>

【讨论】：

我的问题是，getter 有效，但state 无效。我不明白为什么当状态也应该起作用时我必须使用吸气剂。状态也被导出。

@RicoLeuthold：你解决了这个问题吗？我遇到了同样的问题。即使使用mapState，我也无法让state 工作。