在 Vue 中实现集中式状态(数据)管理的一个 Vue 插件,对 vue 应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。
注意:在vue2中一定要使用vuex3
多个组件需要共享数据时使用。
import Vue from 'vue'
// 引入 vuex
import Vuex from 'vuex'
Vue.use(Vuex)
// 准备actions,用于响应组件中的动作
const actions = {}
// mutations 用于操作数据(state)
const mutations = {}
// state 用于存储数据
const state = {}
export default new Vuex.Store({
actions,
mutations,
state
})
// 引入Vue
import Vue from 'vue';
// 引入App
import App from './App.vue';
import store from './store/index'
// 关闭vue的生产提示
Vue.config.productionTip = false;
// 创建vm
new Vue({
el: '#app',
render: createElement => createElement(App),
store
})
// 引入Vue
import Vue from 'vue';
// 引入vuex
import Vuex from 'vuex'
Vue.use(Vuex) // use 之后创建vm的时候,可以有store配置项
// 准备actions,用于响应组件中的动作
const actions = {
// 可简写为 jiaOdd(context, value){}
jiaOdd: function (context, value) {
if (context.state.sum % 2 != 0) {
context.commit('JIA', value)
}
}
}
// mutations 用于操作数据(state)
const mutations = {
JIA(state, value) {
state.sum += value;
}
}
// state 用于存储数据
const state = {
sum: 0
}
export default new Vuex.Store({
actions,
mutations,
state
})
数据之和sum值为: {{$store.state.sum}}
当点击按钮,sum值会有相应的变化并在页面中渲染。
备注:
(1)若没有网络请求或其他业务逻辑,组件中也可以越过 actions,即不写`dispatch`,直接编写`commit`
(2)组件中读取state中存储的数据 sum,使用 $store.state.sum
// 引入Vue
import Vue from 'vue';
// 引入vuex
import Vuex from 'vuex'
Vue.use(Vuex) // use 之后创建vm的时候,可以有store配置项
// 准备actions,用于响应组件中的动作
const actions = {
// 可简写为 jiaOdd(context, value){}
jiaOdd: function (context, value) {
if (context.state.sum % 2 != 0) {
context.commit('JIA', value)
}
}
}
// mutations 用于操作数据(state)
const mutations = {
JIA(state, value) {
state.sum += value;
}
}
// state 用于存储数据
const state = {
sum: 0
}
// getters 用于将state中的数据进行加工
const getters = {
doubleSum(state) {
return state.sum * 2;
}
}
export default new Vuex.Store({
actions,
mutations,
state,
getters
})
数据之和sum值为: {{$store.state.sum}}
数据之和sum值的2倍为: {{$store.getters.doubleSum}}
备注:
(1)当 state 中的数据需要经过加工后再使用时,可以使用 getters 加工。
(2)组件中使用getters中的数据,使用 `$store.getters.bigSum`
数据之和sum值为: {{sum}}
数据之和sum值的2倍为: {{doubleSum}}
mapActions 与 mapMutations 使用时,若需要传递参数需要:在模板中绑定事件时传递好参数,否则参数是事件对象。
数据之和sum值为: {{sum}}
数据之和sum值的2倍为: {{doubleSum}}
下方组件列表第一个人的名字为: {{firstPersonName}}
上方count组件求和为: {{sum}}
列表中第一个人的名字是: {{firstPersonName}}
- {{person.name}}
// 引入Vue
import Vue from 'vue';
// 引入vuex
import Vuex from 'vuex'
Vue.use(Vuex) // use 之后创建vm的时候,可以有store配置项
const countOptions = {
namespaced: true,
actions: {
// 可简写为 jiaOdd(context, value){}
jiaOdd: function (context, value) {
if (context.state.sum % 2 != 0) {
context.commit('JIA', value)
}
}
},
mutations: {
JIA(state, value) {
state.sum += value;
}
},
state: {
sum: 0,
},
getters: {
doubleSum(state) {
return state.sum * 2;
}
}
}
const personOptions = {
namespaced: true,
actions: {
addPersonWang(context, value) {
if (value.name.indexOf('王') === 0) {
context.commit('ADD_PERSON', value);
} else {
alert('添加的人必须姓王!')
}
}
},
mutations: {
ADD_PERSON(state, value) {
state.personList.unshift(value);
}
},
state: {
personList: [
{ id: '001', name: '张三' }
]
},
getters: {
firstPersonName(state) {
return state.personList[0].name;
}
}
}
export default new Vuex.Store({
modules: {
countAbout: countOptions,
personAbout: personOptions
}
})
(1)使用模块化目的:让代码更好维护,让多种数据分类更加明确。
(2)Vuex模块化后,一定要开启命名空间,配置 namespaced: true。
(3)开启命名空间,模块化后,读取各数据
读取state数据:
// 方式一:通过$store.state读取
this.$store.state.Vuex模块化名称.数据属性名
// 方式二:通过mapState方式简写读取
computed: {
...mapState('Vuex模块化名称', ['数据属性名', ...])
}
getters数据:
// 方式一:通过$store.getters读取
this.$store.getters['Vuex模块化名称/getters数据名']
// 方式二:通过mapGetters方式简写读取
computed: {
...mapGetters('Vuex模块化名称', ['getters数据名', ...])
}
调用dispatch(调用时,一定要传参):
// 方式一:通过$store.dispatch
this.$store.dispatch('Vuex模块化名称/Actions中的方法名称', value)
// 方式二:通过mapActions方法简写
methods: {
...mapActions('Vuex模块化名称', {incrementOdd: 'Actions中的方法名称', ...})
}
调用commit(调用时,一定要传参):
// 方式一:通过$store.dispatch
this.$store.commit('Vuex模块化名称/Mutations中的方法名称', value)
// 方式二:通过mapMutations方法简写
methods: {
...mapMutations('Vuex模块化名称', {increment: 'Mutations中的方法名称', ...})
}