vue中vuex的使用

前言:

       vuex是一个专门为vue开发的状态管理工具,它是一个仓库,里面存放了很多对象。

store:

        vuex 中最关键的是store对象,这是vuex的核心。可以说,vuex这个插件其实就是一个store对象,每个vue应用仅且仅有一个store对象。

vuex中有什么?  

1. state

        存放的是数据状态 不可以直接修改里边的值

2. getter

        它类似于vue的计算属性 主要用来过滤一些数据

3. mutations

        它是唯一可以修改state 里数据的方法

4. actions

        它需要调用 dispatch来进行异步操作数据

5. modules

        模块化管理 store(仓库),每个模块拥有自己的 state,actions,mutations,getter

一般什么样的数据会放在 state中?        

     目前主要有两种数据会使用 Vuex 进行管理:        

               1. 组件之间全局共享的数据

               2. 通过后端异步请求的数据

      比如 做加入购物车、登录状态都可以使用 vuex 管理数据状态

怎么使用Vuex?

        在main.js引入store,注入。新建了一个目录store,… export

        场景有:单页应用中,组件之间的状态、音乐播放、登录状态、加入购物车

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue使用Vuex,你需要按照以下步骤进行设置: 1. 安装Vuex:在项目根目录下执行以下命令安装Vuex依赖: ``` npm install vuex ``` 2. 创建store:在项目的src目录下创建一个名为store的文件夹,然后在该文件夹创建一个名为index.js的文件。index.js文件是Vuex的核心文件,用于创建和配置store。 3. 在index.js导入VueVuex,并使用Vue.use(Vuex)注册Vuex插件。然后创建一个新的Vuex store实例: ```javascript import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ // 在这里定义你的state、mutations、actions等 }) export default store ``` 4. 在main.js导入store并将其作为Vue实例的一个选项: ```javascript import Vue from 'vue' import App from './App.vue' import store from './store' new Vue({ store, render: h => h(App) }).$mount('#app') ``` 5. 在store文件夹创建state、mutations和actions等模块,以及需要存储的数据和对数据进行操作的方法。例如,你可以在index.js定义一个名为counter的模块: ```javascript const counter = { state: { count: 0 }, mutations: { increment(state) { state.count++ }, decrement(state) { state.count-- } }, actions: { increment(context) { context.commit('increment') }, decrement(context) { context.commit('decrement') } } } export default new Vuex.Store({ modules: { counter } }) ``` 6. 现在你可以在Vue组件使用Vuex了。你可以通过计算属性computed和方法methods来访问store的状态或触发mutations和actions。例如,你可以在组件使用以下代码: ```javascript <template> <div> <p>{{ count }}</p> <button @click="increment">Increment</button> <button @click="decrement">Decrement</button> </div> </template> <script> export default { computed: { count() { return this.$store.state.counter.count } }, methods: { increment() { this.$store.dispatch('counter/increment') }, decrement() { this.$store.dispatch('counter/decrement') } } } </script> ``` 这样就完成了在Vue使用Vuex的设置。你可以根据自己的需求来定义和使用Vuex的模块、状态、mutations和actions等。希望对你有所帮助!

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值