Vue 2 的脚手架项目，安装 Vuex3.6.2版本。

这个业务逻辑多少都有点奇怪了，阅读浏览次数增值在新闻详情页的控制器方法里setInc，这怎么还写进模型事件里了。如果非要用onAfterRead也可以，把新闻文章的内容单独分出来一个news_content表，然后把它和news做关联，然后给news_content表的onAfterRead事件做增值处理，这样点进新闻页内查询到文章内容时才会触发它。: 评 TP6模型事件-查询后onAfterRead不好用

文章标签更多

ThinkPHP (254)

Mysql (58)

DedeCms (33)

jQuery (67)

证件照 (1)

尺寸大小 (2)

背景颜色 (1)

setInc (4)

setDec (4)

onclick (5)

友情链接更多

超纯水设备

免费设计

海报设计

快递查询

Vuex

打开边栏(ESC) 关闭边栏(ESC)

Vue 2 的脚手架项目，安装 Vuex3.6.2版本。

npm install vuex@3.6.2 --save

在 src 目录下新建 store 文件夹，在该目录下新建 index.js

import Vue from 'vue'
import Vuex from 'vuex'
// 需要使用插件一次
Vue.use(Vuex)
// state:仓库存储数据的地方
const state = {}
// mutations:修改state的唯一手段
const mutations = {}
// actions:处理action,可以书写自己的业务逻辑，也可以处理异步
const actions = {}
// getters:理解为计算属性，用于简化仓库数据，让组件获取仓库的数据更加方便
const getters = {}

// 对外暴露Store类的一个实例
export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

入口文件引入

// 引入仓库
import store from '.store'

new Vue({
  render: h => h(App),
  // 注册仓库：组件实例的身上会多一个属性$store属性
  store
}).$mount('#app')

简单实例

1，组件中实现count加1减1

<template>
  <div>
    <button @click='add'>+1</button>
    <button @click='dec'>-1</button>
    <h1>当前数字：{{count}}</h1>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  computed:{
    ...mapState(['count'])
  },
  methods:{
    add(){
      this.$store.dispatch('add')
    },
    dec(){
      this.$store.dispatch('dec')
    }
  }
}
</script>

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
// 需要使用插件一次
Vue.use(Vuex)
// state:仓库存储数据的地方
const state = {
  count:1
}
// mutations:修改state的唯一手段
const mutations = {
  ADD(state,count){
    state.count++
  },
  DEC(state,count){
    state.count--
  }
}
// actions:处理action,可以书写自己的业务逻辑，也可以处理异步
const actions = {
  add({commit}){
    commit('ADD')
  },
  dec({commit}){
    commit('DEC')
  }
}
// getters:理解为计算属性，用于简化仓库数据，让组件获取仓库的数据更加方便
const getters = {}

// 对外暴露Store类的一个实例
export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

赏