什么是Vuex
专门为vue应用程序开发的状态管理模式，采用集中式存储管理应用的所有组件的状态（数据），以相应的规则保证状态以一种可预测的方式发生改变
Vuex的作用（什么样的情况下使用Vuex）
多个视图依赖于同一个状态（数据），来自不同视图的行为需要变更同一状态
Vuex的流程图和操作结构图
假设这个组件需要从后台拿到数据，那么就牵扯到异步操作，所以将异步操作定义在Actions中，组件中触发这个Actions，Actions中执行异步请求，拿到后台接口，然后拿到数据，需要将数据提交一个mutations改变状态，然后重新渲染组件中的状态
vuex 核心概念和 API
state：vuex 管理的状态对象，它应该是唯一的
const state = {
xxx: initValue
}
mutations：包含多个直接更新 state 的方法(回调函数)的对象，谁来触发: action 中的 commit('mutation 名称')，只能包含同步的代码, 不能写异步代码
const mutations = { yyy (state, {data1}) { // 更新 state 的某个属性 } }
actions：包含多个事件回调函数的对象，通过执行:commit()来触发 mutation 的调用, 间接更新 state，谁来触发: 组件中: $store.dispatch('action 名称', data1)，可以包含异步代码(定时器, ajax)
const actions = { zzz ({commit, state}, data1) { commit('yyy', {data1}) } }
getters：包含多个计算属性(get)的对象，谁来读取: 组件中: $store.getters.xxx
const getters = { mmm (state) { return ... } }
modules：包含多个 module，一个 module 是一个 store 的配置对象，与一个组件(包含有共享数据)对应
Vuex的基本使用（通过一个简易计算器实例分析Vuex流程）
首先使用脚手架初始化一项vue的项目，并且App.vue组件中引入一个组件（简易计算器的这么一个组件）
<template> <div> <h2>简易加法计算器</h2> <div> <input type="button" value="-" /> <span>{{count}}</span> <input type="button" value="+" /> </div> </div> </template> <script> export default { } </script> <style> </style>
<template> <div id="app"> <increment></increment> </div> </template> <script> import Increment from './components/Increment' export default { name: 'app', components: { Increment } } </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>
然后启动项目，可以看到下面的界面
接下来先安装vuex模块
然后src目录中创建一个vuex的目录，在里面创建一个store.js的一个文件，用于操作vuex，并且将vue和vuex导入进来，将vuex作为插件使用
定义一个容器，并且将这个容器导出去，这个store容器，包含应用中的大部分状态，store的特点：
一个页面只能有一个store
状态存储是响应式的（就是说当state中的某个状态值发生改变的时候，使用了这个状态值的组件中的数据也会跟着改变，所以只要改变state中的状态就可以了）
不能直接改变store中的状态，唯一途径就是显示地提交mutations
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 定义一个容器 const store = new Vuex.Store({ }) export default store
然后再mian.js中注入（注入根实例），之后就可以使用vuex来管理状态了，注入的时候需要注意，store小写
// 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 store from './vuex/store' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', store, template: '<App/>', components: { App } })
在store容器中定义一个对象，叫做state，里面存放的都是应用中共享的状态（数据），也就是说包含所有应用级别状态的对象，比如下面定义一个count的状态
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 定义一个容器 const store = new Vuex.Store({ state: { count: 100 } }) export default store
然后在需要这个状态值的组件中拿到这个状态值，就是在组件中使用this（当前组件的实例对象）.$store（因为这个store已经在main.js中注入进来了，所以每个组件都可以访问到这个store）.state
然后在这个state中拿到想要的那个状态值
<template> <div> <h2>简易加法计算器</h2> <div> <input type="button" value="-" /> <span>{{ num }}</span> <input type="button" value="+"/> </div> </div> </template> <script> export default { computed: { num () { return this.$store.state.count } } } </script>
接着在组件中通过事件来触发改变state里面的某个状态值，改变state中的状态值需要通过Mutations（唯一修改状态的事件回调函数）
状态存储是响应式的（就是说当state中的某个状态值发生改变的时候，使用了这个状态值的组件中的数据也会跟着改变，所以只要改变state中的状态就可以了）
不能直接改变store中的状态，唯一途径就是显示地提交mutations
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 定义一个容器 const store = new Vuex.Store({ state: { count: 100 }, mutations: { // 这里里面定义改变状态值的一些函数（需要接收一个state作为参数，也就是state容器） addincrement (state) { state.count += 1 }, deincrement (state) { state.count -= 1 } } }) export default store
然后再组件中通过事件来提交一个mutations并且触发里面相应函数
<template> <div> <h2>简易加法计算器</h2> <div> <input type="button" value="-" @click="deHandler"/> <span>{{ num }}</span> <input type="button" value="+" @click="addHandler"/> </div> </div> </template> <script> export default { computed: { num () { return this.$store.state.count } }, methods: { addHandler () { this.$store.commit('addincrement') }, deHandler () { this.$store.commit('deincrement') } } } </script>
测试，点击加号或者就可以改变count这个状态值，并且查看vue调试工具可以看到数据的变化
在点击事件提交一个mutations的时候，可以传入第二个参数，比如下面我想要点击一次加5或者减5
addHandler () { this.$store.commit('addincrement', 5) }, deHandler () { this.$store.commit('deincrement', 5) }
在容器中的mutations可以接收第二个参数，这个参数叫做payload
mutations: { // 这里里面定义改变状态值的一些函数（需要接收一个state作为参数，也就是state容器） addincrement (state, n) { state.count += n }, deincrement (state, n) { state.count -= n } }
运行测试可以看到，点击一次以5来计算
当需要传递很多个参数的时候，第二个参数写成对象的形式
methods: { addHandler () { this.$store.commit('addincrement', { n: 5 }) }, deHandler () { this.$store.commit('deincrement', { n: 5 }) } }
mutations: { // 这里里面定义改变状态值的一些函数（需要接收一个state作为参数，也就是state容器） addincrement (state, payload) { state.count += payload.n }, deincrement (state, payload) { state.count -= payload.n } }
运行测试：
还可以使用下面这种写法：mutations中接收参数也是一样的写法接收一个payload,然后获取payload下的某个参数值
methods: { addHandler () { this.$store.commit({ type: 'addincrement', n: 5 }) }, deHandler () { this.$store.commit({ type: 'deincrement', n: 5 }) } }
Action异步操作
当点击某个按钮需要从后台请求数据的时候，这个时候有异步的操作，这里就使用上面的例子来模拟一下异步的操作
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 定义一个容器 const store = new Vuex.Store({ state: { count: 100 }, mutations: { // 这里里面定义改变状态值的一些函数（需要接收一个state作为参数，也就是state容器） addincrement (state, payload) { state.count += payload.n }, deincrement (state, payload) { state.count -= payload.n } }, actions: { addAction (context) { setTimeout(() => { // 改变状态，提交mutations context.commit('addincrement', { n: 5 }) }, 1000) } } }) export default store
在组件中触发的时候，先触发actions，然后在提交mutations
<template> <div> <h2>简易加法计算器</h2> <div> <input type="button" value="-" @click="deHandler"/> <span>{{ num }}</span> <input type="button" value="+" @click="addHandler"/> </div> </div> </template> <script> export default { computed: { num () { return this.$store.state.count } }, methods: { addHandler () { // 触发Actions this.$store.dispatch('addAction') }, deHandler () { this.$store.commit({ type: 'deincrement', n: 5 }) } } } </script>
getters计算属性
包含多个计算属性(get)的对象，谁来读取: 组件中: $store.getters.xxx
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 定义一个容器 const store = new Vuex.Store({ state: { count: 100 }, mutations: { // 这里里面定义改变状态值的一些函数（需要接收一个state作为参数，也就是state容器） addincrement (state, payload) { state.count += payload.n }, deincrement (state, payload) { state.count -= payload.n } }, actions: { addAction (context) { setTimeout(() => { // 改变状态，提交mutations context.commit('addincrement', { n: 5 }) }, 1000) } }, getters: { oddOrEven (state) { return state.count % 2 === 0 ? '偶数' : '奇数' } } }) export default store
<template> <div> <h2>简易加法计算器</h2> <div> <input type="button" value="-" @click="deHandler"/> <span>{{ num }}, is {{ oddOrEven2 }}</span> <input type="button" value="+" @click="addHandler"/> </div> </div> </template> <script> export default { computed: { num () { return this.$store.state.count }, oddOrEven2 () { return this.$store.getters.oddOrEven } }, methods: { addHandler () { // 触发Actions this.$store.dispatch('addAction') }, deHandler () { this.$store.commit({ type: 'deincrement', n: 5 }) } } } </script>
vuex的API使用
mapState的使用：直接获取state中的某个数据
mapGetters的使用：获取getters中的对应的get名称的返回值
mapActions的使用：触发store下的actios下对应的action，事件名称跟action的名称需要一样（开发中一般不这么写，不可以传递参数）
mapMutations的使用：跟mapActions的使用一样
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 定义一个容器 const store = new Vuex.Store({ state: { count: 100 }, mutations: { // 这里里面定义改变状态值的一些函数（需要接收一个state作为参数，也就是state容器） addincrement (state, payload) { state.count += payload.n }, deHandler (state) { state.count -= 1 } }, actions: { addHandler (context) { setTimeout(() => { // 改变状态，提交mutations context.commit('addincrement', { n: 5 }) }, 1000) } }, getters: { oddOrEven (state) { return state.count % 2 === 0 ? '偶数' : '奇数' } } }) export default store
<template> <div> <h2>简易加法计算器</h2> <div> <input type="button" value="-" @click="deHandler"/> <span>{{ count }}, is {{ oddOrEven2 }}</span> <input type="button" value="+" @click="addHandler"/> </div> </div> </template> <script> import {mapState, mapGetters, mapActions, mapMutations} from 'vuex' export default { computed: { ...mapState(['count']), // 直接获取state下的count这个数据，相当于这个组件中有了count这个变量，可以任意地方this.count获取这个数据，但是不能直接修改 ...mapGetters({ // 直接获取getters返回的值，可以获取多个对应的getters oddOrEven2: 'oddOrEven' }) }, methods: { ...mapActions(['addHandler']), // 事件名称跟actions名称一样 ...mapMutations(['deHandler']) // 事件名跟对应的Mutations名称一致 } } </script>
实际开发项目中应该如何使用vuex
实际开发项目中我们不会像上面那样去使用vuex，首先我们会将每个功能模块对应一个stote文件，然后通过module来合并到store.js文件中，下面来做一个实例
目录结构
这里是两个模块feeds和movies
store
│ index.js
│
├─feeds.js
│
└─movies.js
第一步：在store文件夹下的index.js入口文件写入
import Vue from 'vue' import Vuex from 'vuex' import Vue from 'vue'; import Vuex from 'vuex'; import feeds from './feeds'; import Movies from './movies'; Vue.use(Vuex) // 全局状态对象 const state = {} // 全局mutations let mutations = {} let getters = {} let actions = {} export default new Vuex.Store({ state: state, mutations: mutations, getters: getters, actions: actions, modules: { feeds, movies: Movies } })
第二步：在每个模块内的index文件这组装所有的零件(state,actions,mutations,getters)，并且输出
注意上面多出的一行，我们在组件里怎么区分不同模块呢？namespaced写成true，意思就是可以用这个module名作为区分了（也就是module所在的文件夹名）
export default { namespaced: true, state: {}, actions: {}, mutations: {}, getters: {} }
第三步：在组件里使用获取state中的数据，在组件的计算属性中写
如果是全局下的state
...mapState(['userInfo', 'isInNative'])
如果是模块下的state，这里表示获取movies模块下的projectApplyId这个数据
...mapState('movies', ['projectApplyId'])
第四步：触发actions操作，在组件的methods中写
store.dispatch('pi/taskSaveAndSubmit', {projectLockKey: that.projectLockKey})
...mapActions('movies',[
'foo',
'bar'
])