关于VueX的使用

最新推荐文章于 2024-06-14 15:02:13 发布

xiaoLP1

最新推荐文章于 2024-06-14 15:02:13 发布

阅读量297

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： vuex vue状态管理

本文链接：https://blog.youkuaiyun.com/xiaoLP1/article/details/82317665

web前端专栏收录该内容

16 篇文章

订阅专栏

怎么存放可全局访问的变量？
页面跳转的时候，怎么传递参数到下一个页面比较好？
页面返回上一页的时候，怎么传递当前页的数据到上一页？
多个页面间需要同步数据，怎么做比较好？

1.stores.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
export default new Vuex.Store({// 创建Vuex实例
  state: {// 状态值
    count: 1
  },
  mutations: {// 对值执行的操作
    jiaCount: (state) => {
      state.count += 1
      console.log(state.count)
    },
    jianCount: (state) => {
      state.count -= 1
    }
  }
})

<template>
<div>
  <button  @click="hanleDecrement">-</button>
   <div>{{count}}</div>
    <button @click="hanleIncrement">+</button>
</div>
</template>
<script>
 import globalStore from '../../stores/global-store'

export default {
   data () {
     return {
 
     }
   },
   computed: {// 计算属性（直接在data赋值没用）
     count () {
       return globalStore.state.count
     }
   },
   methods: {
     hanleDecrement () {
       globalStore.commit('jianCount')
     },
     hanleIncrement () {
       globalStore.commit('jiaCount')
     }
   }
 
}
</script>

<style scoped>
 
</style>