安装：npm i vuex --save
导入：
// main.js 文件中
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
// state.js
const store = new Vuex.Store()
export default store;
main.js 中进行注入
import store from './state/store'
new Vue({
el: "#app",
store
})
具体的state.js的实现
const state = {
count: '',
name: ''
}
const getters = {
getCount: (state) => {
return state.count;
}
}
const mutations ={
addCount (state) {
state.count++
},
sumCount (state, num) {
state.count += num;
}
}
const actions = {
readCount: (context) => {
context.commit('addCount')
},
blurCount: (context, num) => {
context.commit('sumCount', num)
}
}
export default new Vuex({
state,
getters,
mutations,
actions
})
组件中状态的使用
- this.$store.state.count
组件中触发mutation
- this.$store.commit('addCount')
- this.$store.commit('sumCount', 12)
组件getters的使用
- this.$store.getters.getCount
actions的执行
-
this.$store.dispatch('readCount')
-
this.$store.dispatch('blurCount', '12')
vuex模块化的时候
// 主文件
import A from './A'
import B from './B'
export default new Vuex.Store({
modules:{
A,
B
}
})
// 分模块
const state = {
}
const getters = {
}
const mutations = {
}
const actions = {
show: (context) => {
context.commit('sb')
}
}
export default {
nameSpaced: true, // 全局引用文件方法时标识这个文件名
state,
getters,
mutations,
actions
}
模块化之后 action的使用
this.$store.dispatch('A/show')
