Vue 之 Vuex（1）创建Vuex容器与单独JS管理

<!DOCTYPE html><html lang="en" xmlns=""><head><meta charset="UTF-8"><title>创建Vuex容器</title></head><body><div id="app"><button-counter></b

憶

46159人浏览 · 2021-06-05 22:59:11

憶 · 2021-06-05 22:59:11 发布

<!DOCTYPE html>
<html lang="en" xmlns="">
<head>
    <meta charset="UTF-8">
    <title>创建Vuex容器</title>
</head>
<body>
<div id="app">
    <button-counter></button-counter>
</div>

<!-- 引入最新版本的 vue 和 vuex -->
<script src="https://unpkg.com/vuex"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	// 自定义组件
    Vue.component('ButtonCounter', {
        computed: {
            count() {
            	// 访问 Vuex 中的状态
                return this.$store.state.count
            }
        },
        methods: {
            handleClick() {
            	// 访问 Vuex 中的方法
                // 通过 commit 调用 mutations 下的方法
                this.$store.commit('increment')
            }
        },
        template: `<button @click="handleClick">You clicked me {{ count }} times.</button>`
    })

    // 创建Vuex容器
    const store = new Vuex.Store({
        // 严格模式，不使用 mutations 变更 state 数据，抛出异常
        strict: true,
        // 状态数据放在 state 选项中
        state: {
            count: 0
        },
        // mutations 定义修改 state 选项中属性状态的方法，state 作为接收的第一次参数
        // 不建议直接修改 state，直接修改不容易跟踪变化
        mutations: {
            increment(state) {
                state.count++
            }
        }
    })

    new Vue({
        el: '#app',
        // 注册 store 示例，ES6 对象的 property 简写 (用在对象某个 property 的 key 和被传入的变量同名时)
        // store: store,
        store // 与上面注释作用相同，ES6支持的简写形式
    });

</script>
</body>
</html>

在这里插入图片描述

store.js：Vuex单独文件管理（在 Vue CLI框架下）

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

Vue.use(Vuex)

// 创建Vuex容器
export default new Vuex.Store({
  strict: true,
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    },
    incrementBy(state, payload) {
      state.count += payload.amount
    }
  }
})

Vue 组件引用

<template>
  <div>
    <button @click="handleClick">handleClick</button><hr>
    <button @click="add">increment as add：You clicked me {{ count }} times.</button><hr>
    <button @click="incrementBy({amount: 10})">incrementBy：You clicked me {{ count }} times.</button>
  </div>
</template>

<script>
import {mapMutations} from 'vuex'
import store from '@/store'

export default {
  store,
  computed: {
    count() {
      return this.$store.state.count
    }
  },
  methods: {
    handleClick() {
      alert('Hello, 我是组件自己的方法 ~')
    },
    ...mapMutations([
      'incrementBy'
    ]),
    ...mapMutations({
      add: 'increment'
    })
  }
}
</script>

<style scoped></style>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^