VUEX是什么
管理（修改或设置）组件用到的数据的工具。免除了之前组件传值的麻烦。组件传值
VUEX组成
官方图片
store
容器对象，储存state,mutations,actions,getters
state
保存数据的对象
mutations
保存函数的对象，只有mutations中的函数，才能更改state中数据的值，触发方式 this.$store.commit(param)（不支持异步操作）
actions
保存函数的对象，actions中的函数能够触发mutations中的函数，从而修改state中数据的值（支持异步操作）
getters
保存函数的对象，通过getters中的函数，可以计算依赖于state数据的新数据
VUEX使用步骤
1. 安装
终端运行npm i vuex -S，注意：生产环境中也需要使用
2.文件结构
文件结构
3.流程分析
（1）
- 新建store文件夹，在文件夹中创建store.js文件
- 在store.js中引入vuex，挂载vuex
- 将对应的数据或者函数分别写入对应的state、mutations、actions、getters
- 创建vuex实例并导出
（2） - 在main.js中引入store.js
- 在vue实例中注入store
（3） - 在components文件夹中新建decrement.vue和increment.vue
- 注意：组件提交mutations等的两种方法 | 如何传参 | mapXXXXX前一定要加... | mutations(commit) 、actions(dispatch)
（4） - 在App.vue中导入子组件
- 在App.vue导出对象中创建子组件
- 在坑中填上子组件
4.文件内容
（1）store.js
// 引入vue、vuex
import Vue from 'vue'
import Vuex from 'vuex'
// 挂载vuex
Vue.use(Vuex)
// 给vuex中的四个核心内容填值和方法
const state = {
count : 0
}
const mutations = {
// 加法
increment: (state, n) => {
state.count = state.count + n;
return state.count
},
// 减法
decrement: (state, n) => {
state.count = state.count - n;
return state.count
},
// 归零
zero: state => state.count = 0,
// 取负
negate: state => state.count = -state.count
}
const actions = {
zeroAct ({commit}) {
commit('zero')
},
negateAct ({commit}) {
commit('negate')
}
}
const getters = {
evenOrOdd: state => state.count % 2 === 0 ? '偶数' : '奇数'
}
// 创建vuex实例，并导出
export default new Vuex.Store({
state,
mutations,
actions,
getters
})
（2）increment.vue
<template>
<div>
<br>
当前值为：
<el-tag type='success'>{{$store.state.count}}</el-tag>
<el-button @click="increment">+1</el-button>
<el-button @click="zero">归0</el-button>
</div>
</template>
<script>
// 案例演示两种提交mutations和actions的方法，incerement.vue里演示方法1，decrement.vue里演示方法2
export default {
methods: {
// 1. mutations -- commit
increment() {
this.$store.commit('increment', 1)
console.log(this)
},
// 2. actions -- dispatch
zero () {
this.$store.dispatch("zeroAct")
}
}
}
</script>
<style scoped>
</style>
（3）decrement.vue
<template>
<div>
<br>
当前值为：
<el-tag type='success'>{{$store.state.count}}</el-tag>
<el-button @click="decrement(1)">-1</el-button>
<el-button @click="negateAct">取负</el-button>
<br><br>
{{evenOrOdd}}
</div>
</template>
<script>
// 案例演示两种提交mutations和actions的方法，incerement.vue里演示方法1，decrement.vue里演示方法2
import {mapMutations, mapActions, mapGetters} from 'vuex'
export default {
methods: {
// 1.前面要加... 2.mapMutations可以引入多个方法 3.([])注意结构
...mapMutations([
'increment',
'decrement'
]),
...mapActions([
'negateAct'
]),
},
computed: {
...mapGetters([
'evenOrOdd'
])
}
}
</script>
<style scoped>
</style>
（4）main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
// 引入element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 挂载element-ui
Vue.use(ElementUI)
// 引入index.scss
import '@/styles/index.scss'
Vue.config.productionTip = false
// 引入store，并在vue实例中注入store
import store from '@/store/store'
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
（5）App.vue
<template>
<div id="app">
vuex展示
<increment></increment>
<decrement></decrement>
<router-view/>
</div>
</template>
<script>
// 导入子组件
import increment from '@/components/increment'
import decrement from '@/components/decrement'
export default {
name: 'App',
components: {
increment,
decrement
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
案例基础：vue-cli和element-ui
VUEX案例问题补充
- 页面刷新，store对象中state变量丢失怎么办？
使用localStorage。先存值，再赋值。
