您的位置: 首页  >  文章  >  Vuex简单使用

Vuex简单使用

分类: 文章 • 2023-11-15 18:45:22

文章目录

Vuex 是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

Vuex 图解

Vuex简单使用

Vuex 配置步骤

  1. 安装vuex
    cnpm i vuex -S
  2. 导入 vuex
    import Vuex from 'vuex'
  3. 将vuex 挂载到 vue中
    Vue.use(Vuex)
  4. new Vuex.Store() 实例，得到一个数据仓储对象
  5. 将 vuex 创建的 store 挂载到 vm 实例上,只要挂载vm上，任何组件都能使用 store 来存取数据
var store = new Vuex.Store({
	state:{
		// 大家可以把这个 state 想象成组件中的 data，专门用来存储数据的
		// 如果在 组件中 ，想要访问 store 中的数据，只能通过 this.$store.state.*** 来访问
		count:0
	},
	mutations:{
		// 注意：如果要操作 store 中的 state 值，只能通过 调用 mutations 提供的方法，才能操作
		// 对应的数据，不推荐直接操作 state 中的数据，因为 玩意导致了数据的紊乱，不能快速定位到错误的原
        // 因，因为，每个组件都可能有操作数据的方法；
        increment(state){
			// 传参第一个参数，是固定不变的，就像过滤器一样，
			state.count++
		},
		subtract(state,obj){
			// 在mutations 函数列表最多只能传 2 个参数
			state.count -= obj.c+obj.d
		}
		// 注意：如果子组件想要调用我们的 mutations 中的方法，只能使用 this.$store.commit('方法名')
		// 这种 调用 mutations 方法的格式，和 this.$emit('父组件中的方法名')
		
	},
	getters:{
		// 这里的getters，只负责 对外提供数据，不负责 修改数据，如果想要修改 state 中的数据，就去找 mutations
	
		optCount:function(state){
			return '当前最新的count值是：' + state.count
		}
		
		// 经过回顾对比，getters 中的方法，和组件中的过滤器比较类似，因为 过滤器和getters 都没有修改原数据，都是把原数据做了一层包装，提供给了调用者；
        // 其次：getters 也和 computed 比较像，只要 state 中的数据发生变化，那么，如果 getters 正好 也引用了这个数据，那么 就会立即触发 getters 的重新求值；
	}

})

简单的例子

main.js文件：

import Vue from 'vue'
// 这是导入app组件
import app from './App.vue'
// 配置 vuex 步骤
// 1.导入vuex
import Vuex from 'vuex'
// 2.将vuex 挂载到 vue 中
Vue.use(Vuex);
// 3.创建store 实例

var store = new Vuex.Store({
    state: {
        // 大家可以把这个 state 想象成组件中的 data，专门用来存储数据的
        // 如果在 组件中 ，想要访问 store 中的数据，只能通过 this.$store.state.*** 来访问
        count: 0
    },
    mutations: {
        // 注意：如果要操作 store 中的 state 值，只能通过 调用 mutations 提供的方法，才能操作
        // 对应的数据，不推荐直接操作 state 中的数据，因为 玩意导致了数据的紊乱，不能快速定位到错误的原
        // 因，因为，每个组件都可能有操作数据的方法；
        increment(state) {
            // 传参第一个参数，是固定不变的，就像过滤器一样，
            state.count++
        },
        subtract(state, obj) {
            // 在mutations 函数列表最多只能传 2 个参数
            state.count -= obj.c + obj.d
        }
        // 注意：如果子组件想要调用我们的 mutations 中的方法，只能使用 this.$store.commit('方法名')
        // 这种 调用 mutations 方法的格式，和 this.$emit('父组件中的方法名')
    },
    getters: {
        // 这里的getters，只负责 对外提供数据，不负责 修改数据，如果想要修改
        //  state 中的数据，请 去找 mutations
        optCount: function (state) {
            return '当前最新的count值是：' + state.count
        }
        // 经过回顾对比，getters 中的方法，和组件中的过滤器比较类似，因为 过滤器和getters
        //  都没有修改原数据，都是把原数据做了一层包装，提供给了调用者；
        // 其次：getters 也和 computed 比较像，只要 state 中的数据发生变化，那么，如果 getters
        //  正好 也引用了这个数据，那么 就会立即触发 getters 的重新求值；
    }
})

var vm = new Vue({
    el: '#app',
    render: function (c) {
        return c(app); //render 会把 el 指定的容器中，所有的内容都清空覆盖，所以不要把
        // 路由的 router-view 和 router-link 直接写到 el 所控制的元素中
    },
    // 4.配置vuex第五步，将 vuex 创建的 store 挂载到 vm 实例上,只要挂载vm上，任何组件都能使用 store 来存取数据
    store: store
})

App.vue文件：

<template>
  <div>
    <amount></amount>
    <hr>
    <counter></counter>
  </div>
</template>
<script>
// 导入counter、amount组件
import counter from "./components/amount.vue";
import amount from "./components/counter.vue";
export default {
  data() {
    return {};
  },
  components: {
    counter: counter,
    amount: amount
  }
};
</script>
<style>
</style>

counter.vue文件：

<template>
  <div>
    <input type="button" value="减少" @click="remove">
    <input type="button" value="增加" @click="add">
    <br>
    <input type="text" v-model="$store.state.count">
  </div>
</template>
<script>
export default {
  data() {
    return {
    };
  },
  methods: {
    add() {
      // 千万不要这么用，不符合 vuex 的设计理念
      //   this.$store.state.count++;
      this.$store.commit("increment");
    },
    remove() {
      // 注意：在 mutations 的函数参数列表中，最多支持两个参数，其中 ，参数1：是 state 状态；
      // 参数2：通过 commit 提交过来的参数
      //   如果想传多个参数，可以传对象或者数组
      this.$store.commit("subtract", { c: 2, d: 1 });
    }
  },
  computed: {
    fullname: {
      get() {},
      set() {}
    }
  }
};
</script>
<style lang="scss" scoped>
</style>

amount.vue文件：

<template>
  <div>
    <!-- <h3>当前数量为：{{$store.state.count}}</h3> -->
    <h3>{{$store.getters.optCount}}</h3>
  </div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
</style>

总结

  1. state 中的数据，不能直接修改，如果想要修改，必须通过 mutations
  2. 如果组件想要直接，从 state 上获取数据：需要 this.$store.state.***
  3. 如果 组件，想要 修改数据，必须使用 mutation 提供的方法，需要通过 this.$store.commit(‘方法名称’,一个参数)
  4. 如果 store 中 state 上的数据，在对外提供的时候，需要做一层包装，那么，推荐使用 getters，如果需要使用 getters，则用 this.$store.getters.***

相关推荐