基础入门文档建议直接查看vuex中文文档
vuex中文文档
我的理解：在 Vue.js 的项目中，如果项目结构简单， 父子组件之间的数据传递可以使用 props 或者 $emit 等方式，当需要子组件和子组件之间传递数据数据，往往比较麻烦，Vue 没有直接子对子传参的方法，建议将需要传递数据的子组件，都合并为一个组件。如果一定需要子对子传参，可以先从传到父组件，再传到子组件。为了便于开发，Vue 推出了一个状态管理工具 Vuex，可以很方便实现组件之间的参数传递Vue 推出了一个[状态管理工具 Vuex，可以很方便实现组件之间的参数传递。
一、Vuex的安装
首先使用npm安装
npm install vuex --save
然后在main.js中调用
import Vue from 'vue'
import Vuex from 'vuex'
Vue use(Vuex)
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App }
})
二、构建核心仓库store.js
Vuex 应用的状态 state 都应当存放在 store.js 里面，Vue 组件可以从 store.js 里面获取状态，可以把 store 通俗的理解为一个全局变量的仓库。但是和单纯的全局变量又有一些区别，主要体现在当 store 中的状态发生改变时，相应的 vue 组件也会得到高效更新。
在src目录下新建一个store目录，将index.js放在store目录下
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
//定义状态
state:{
author:'mirs chen'
},
//计算属性
getters:{
},
//修改状态事件，必须同步函数
mutations:{
newAuthor (state, msg) {
state.author = msg;
}
},
//提交 mutation，可以异步操作
actions:{
},
//模块
modules:{
}
})
export default store
这是一个最简单的store结构，里面只存放了一个状态author，在mutations写了一个事件，用于修改状态，后面会用到。
虽然在 main.js 中已经引入了 Vue 和 Vuex，但是这里还得再引入一次
三、将状态映射到组件中
<template>
<div class="hello">
<h1>{{ msg }}</h1>
{{author}}
<div @click="change">点击</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
computed:{
author(){
return this.$store.state.author;
}
},
methods:{
change(){
this.$store.commit('newAuthor','hahha');
}
}
}
</script>
这个一个新建的组件，在computed中，写author方式，用来读取store中存放的状态，读取方式this.$store.state.author，并将读取到的值显示在页面中。
四、组件中修改状态
官方推荐写法
在上面代码中，我在methods中写了change方法用来改变状态
首先store.js中定义修改方法newAuthor ，其中第一个参数就是$store.state，第二个参数msg需要外部传入
newAuthor (state, msg) {
state.author = msg;
}
第二步在组件的methods中添加change方法调用 store.commit 方法,其中第一个参数状态事件的方法，第二个参数是外部传入的msg
change(){
this.$store.commit('newAuthor','hahha');
}
这样就可以显示的修改store的状态
简单写法
不需要再store中写好修改状态的方法，直接在组件中修改
methods:{
change(){
this.$store.state.author = 'hahha';
// this.$store.commit('newAuthor','hahha');
}
}
这种方式在严格模式下会报警告，而且在大型项目中很难维护，所以不推荐使用。
问题
- vuex中 state，getters，mutations，actions各表示什么？
在官网中有详细介绍，我的理解是：
state：保存的是状态，相当于全局变量的仓库，可以在组件中调用，也可以修改。
getters：state 中派生出一些状态，例如对列表进行过滤并计数，可以在getters中设置计算属性的方法，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。也可以被组件调用，调用方法：this.$store.getters.方法名
mutations：用来写修改状态的事件，供外部调用，mutation 都是同步事务
actions：由mutations不能完成的异步操作方法，可以写在actions里面
2.使用vuex 报错requires a Promise polyfill in this browser
造成这种现象的原因归根究底就是浏览器对ES6中的promise无法支持，因此需要通过引入babel-polyfill来是我们的浏览器正常使用es6的功能
安装babel-polyfillnpm install babel-polyfill --save-dev
调用import "babel-polyfill"
3.vuex数据持久化，vuex-persist
安装vuex-persist
npm install -S vuex-persist
在store文件中引用
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import VuexPersist from 'vuex-persist'
const vuexLocal = new VuexPersist({
storage:window.sessionStorage
});
const store = new Vuex.Store({
plugins:[vuexLocal.plugin]
})
export default store
