Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex 和单纯的全局对象有以下两点不同:
<body>
<div id="app">
<input type="button" value="+" @click="add">
{{this.$store.state.count}}
<input type="button" value="-" @click="reduce">
{{this.$store.getters.synchro}}
<input type="button" value="改变为10" @click="changeNum">
div>
<script src="vue.js">script>
<script src="vuex.js">script>
<script>
var store = new Vuex.Store({
state: {
count: 0
},
getters: {
synchro(state) {
return state.count
}
},
mutations: {
increment(state) {
state.count++
},
inreduce(state) {
state.count--
},
inchange(state, num) {
state.count = num
}
},
actions: {
change(context, num) {
context.commit('inchange', num)
}
}
})
new Vue({
el: '#app',
store,
methods: {
add() {
this.$store.commit('increment')
},
reduce() {
this.$store.commit('inreduce')
},
changeNum() {
this.$store.dispatch('change', 10)
}
}
})
script>
body>
在组件中调用
<template>
<div>
<input type="button" value="改变count的值" @click="change">
{{this.$store.state.count}}
<div>
template>
<script>
export default {
name: '',
data () {
return {
}
},
methods: {
change() {
this.$store.commit('changeNum', 10)
}
}
}
script>
2
import Vue from 'vue'
import app from './app'
import router from './router'
import store from './vuex'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
store,
router,
components: { app },
template: ' '
})
在 index.js 里写上如下代码
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
let modules = {}
const requireAllModules = require.context("./", true, /\.js$/)
requireAllModules.keys().forEach(key => {
let module = requireAllModules(key).default
if (module && module.name && module.namespaced) {
modules[module.name] = module
}
})
export default new Vuex.Store({
modules: modules,
strict: process.env.NODE_ENV !== "production"
})
在 modules 目录下 新建 city.js 文件,里面代码如下
export default {
name: "city",
namespaced: true,
state: {
cityName: '',
cityCode: ''
},
getters: {
getState(state) {
return state
},
getCityCode(state) {
return state.cityCode
}
},
mutations: {
changeCity(state, cityName) {
state.cityName = cityName
}
}
}
在组件里设置值
<template>
<div>
<ul>
<li v-for="item in city" @click="handChangeCity(item.name)">li>
ul>
div>
template>
<script>
import { mapMutations } from 'vuex' // 引入vuex
export default {
name: "city",
data() {
return {
city: [
{ id: 1, name: '北京' }
{ id: 2, name: '上海' }
{ id: 3, name: '广州' }
{ id: 4, name: '深圳' }
{ id: 5, name: '厦门' }
]
}
},
methods: {
// 修改
...mapMutations({
changeCity: "city/changeCity"
}),
// 第一种写法
handChangeCity(cityName) {
this.changeCity(cityName)
}
// 第二种写法 不需要使用 ...mapMutations
handChangeCity(cityName) {
this.$store.commit('city/changeCity', cityName);
}
}
}
script>
在另一个组件里使用
<template>
<div>
<div>{{getState.cityName}}div>
<div>{{getCityCode}}div>
div>
template>
<script>
import { mapGetters} from 'vuex' // 引入vuex
export default {
data() {
return {
}
},
computed: {
// 第一种使用方法
...mapGetters({
getState: "city/getState"
})
// 第二种使用方法
...mapGetters('city', ['getState', 'getCityCode'])
}
}
script>
0条评论