vuex存取值

commit: 同步操作【mutation 】

this.$store.commit('方法名',值)【存储】

  1. this.$store.commit('newBankName', this.textValue)

this.$store.state.方法名【取值】

dispatch: 异步操作【Action】

this.$store.dispatch('方法名',值)【存储】

this.$store.getters.方法名【取值】

<template>
  <div class="hello">
    <h1>{
  { msg }}</h1>
    <button @click="increment">按钮{
  {doneTodos}}</button>    
      <button @click="incrementAsync">按钮new{
  {doneTodos}}</button>   
  </div>
</template>

<script>
import { mapGetters ,mapActions,mapMutations} from 'vuex'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return{}
  },
  methods:{
  // 可以用 
this.$store.commit('increment')
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 &#
  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vuex是Vue.js的一个状态管理库,它可以使得在应用程序中共享数据更容易。在实际的开发中,我们经常需要进行跨组件的状态共享,而在许多情况下,我们需要保在本地储的用户信息或者一些常用数据。其中的一个常见的应用场景是储用户的token。 在Vuex储和获取token通常是这样实现的: 1.首先,在store中定义一个state对象来储token,具体实现可以看下面的示例代码: ``` const store = new Vuex.Store({ state: { token: localStorage.getItem('token') || '' }, mutations: { setToken(state, token) { state.token = token; localStorage.setItem('token', token); }, removeToken(state) { state.token = ''; localStorage.removeItem('token'); } } }); ``` 2.上述代码中,我们首先在state中定义了一个token变量来储获取到的token,然后在mutations中定义了两个操作函数,分别用于设置token和移除token。这里我们使用localStorage来储token,这样当用户刷新页面时,我们可以从localStorage中获取用户的token。 3.在具体业务逻辑中,我们需要使用mutation操作来设置或者移除token,例如: ``` this.$store.commit('setToken', 'your_token_value'); this.$store.commit('removeToken'); ``` 4.最后,我们可以使用getters来定义获取token的逻辑: ``` const store = new Vuex.Store({ state: { token: localStorage.getItem('token') || '' }, mutations: { setToken(state, token) { // ... }, removeToken(state) { // ... } }, getters: { getToken(state) { return state.token; } } }); ``` 5.上述代码中,我们定义了一个getters函数getToken,该函数用于获取当前储在state中的token值。在具体的组件中,我们可以通过以下方式来获取token: ``` console.log(this.$store.getters.getToken); ``` 以上就是在Vue.js中使用Vuex取token的具体实现方法。通过使用Vuex,我们可以更加方便地实现跨组件的状态共享,从而提高开发效率和代码可维护性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值