初始Vuex

最新推荐文章于 2025-05-28 09:20:18 发布

coder_glack

最新推荐文章于 2025-05-28 09:20:18 发布

阅读量115

点赞数

本文链接：https://blog.youkuaiyun.com/qq_43013884/article/details/90556523

版权

Vuex概念:

Vuex 是为了保存组件之间共享数据而诞生的，如果组件之间有要共享的数据，可以直接挂载到vuex中，而不必通过父子组件之间的传值了，如果组件不需要共享，此时这些不需要共享的数据，没必要放到Vuex中.

注意:

只有共享的数据，才有权放vuex 中，组件内部私有的数据，只要放到组件的data中即可:
props、data、 vuex 三者的区别:

Props是子组件需要传递的数据。
data 是组件内部私有属性
vuex是全局共享的数据存储区域,相当于是一个数据的仓库

安装

安装vuex，

sudo npm i vuex --save
导入包
```
 import Vuex from 'vuex'
```
注册vuex到vue中
```
 Vue.use(Vuex)
```
new Vuex.Store()实例，得到一个数据存储对象

import Vue from 'vue'

// 1. 导入vue-router包
import VueRouter from 'vue-router'
// 2. 手动安装VueRouter 
Vue.use(VueRouter)

// 3.导入app组件
import app from './app.vue'

//配置步骤
// 1. 装包  
// 2. 导入包
// 3. 注册包
// 4. 注册一个实例
// 5. 将vuex挂载到实例上
	

import Vue from 'vue'

// 1. 导入vue-router包
import VueRouter from 'vue-router'
// 2. 手动安装VueRouter 
Vue.use(VueRouter)

// 3.导入app组件
import app from './app.vue'

//配置步骤
// 1. 装包  
// 2. 导入包
// 3. 注册包
// 4. 注册一个实例
// 5. 将vuex挂载到实例上

import Vuex from 'vuex'
Vue.use(Vuex)

var store = new Vuex.Store({
  state: {
    //专门用来存数据的
    // 如果在组件中，想要访问.store中的数据，只能通过this.$store.state.*** 来访问
    count: 0
  },
  mutations: {
    // 如果要操作store 中的数据，只能通过调用mutations提供的方法，才能操作对应的数据
    // ，不推荐直接操作state中的数组,万一导致了数据的紊乱，不能快速定位到错误的原因，
    // 每个组件都可能有操作数据的方法
    // 定义一个管理员
    increment(state) {
      state.count++
    },
    // 只能传两个参数,其中参数一是 state 状态，参数二是提交过来的参数
    // 可以通过传入一个对象
    subtract(state, obj) {
      state.count -= (obj.c + obj.d)
    }
  },
  getters: {
    // 这里的数据只负责对外提供数据，不负责修改,如果想要修改，请去找mutation
    // 如果store中的state上的数据，在对外提供的时候，需要做一些包装，推荐使用getters.***
    optCount: function (state) {
      return '当前最新的count值是:' + state.count
    }
    // 对比之后，getters中的方法和组件中的过滤器类似，因为过滤器和getters都不会修改数据，都是把原数据做了包装提供给了调用者
    // getters和 computed 比较像，只要state的数据发生变化，如果getters也引用了这个数据，立刻触发重新求值
  }
})


var vm = new Vue({
  el: "#app",
  render: c => c(app),
  store   //在VM实例中，将vuex 创建的store 挂载到vm实例上，只要挂载到了vm上，就能全局访
  // 问所有的组件，任何组件都可以通过store来访问数据
})