最近开始实习，需要用到vuex，感觉很不熟悉，就看了官网+技术胖的教程，记录一下
参考链接：
https://vuex.vuejs.org/zh-cn/intro.html
https://juejin.im/entry/59191b6b0ce4630069f6a3ad
一、知识点介绍
1. 状态管理分为三部分：state、view、actions。整个vuex核心是store，vuex的状态是响应式的，当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。不能直接更改store中的状态，改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。
2. state：从store实例中读取状态的最简单方法是在计算书型中返回某个值。vuex通过store将状态从根组件“注入”到每个子组件中
当组件需要获取多个状态时，使用mapState辅助函数生成计算属性。
3. Getters：从state派生出的状态。（比如对数据进行加减运算、过滤等操作），使用mapGetters
4. Mutation：提交mutation是更改vuex的store中状态的唯一方式，必须同步。store.commit('')
可以将常量保存在文件中，然后通过常量调用。
// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'
// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'
const store = new Vuex.Store({
state: { ... },
mutations: {
// 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
[SOME_MUTATION] (state) {
// mutate state
}
}
})
5. Action类似于mutation，两点不同：
1）Action提交的是mutation，而不是直接变更的状态
2）Action可以包含任意异步操作
action通过store.dispatch触发，通过context.commit提交状态，通过context.state和context.getter获取state和getters
6. Modules：将store分割成模块
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
二、构建项目
1. 创建vue工程，这个之前的文章里记录过了
2. 在工程中安装vuex：
npm install vuex --save
3. 引用vuex：
在项目目录中创建一个vuex的文件夹，在文件夹下创建store.js文件，(为了好区分)
文件中引入vue和vuex，
import Vue from 'vue' import Vuex from 'vuex'
之后引用vuex
Vue.use(Vuex)
4. state
1）store.js中，添加常量对象
const state = {
count:1
}
//封装从而使外部能够引用
export default new Vuex.Store({
state
})
2）在components文件夹中新建count.vue，模板中引入store.js
<template>
<div>
<h2>{{msg}}</h2>
<hr/>
<h3>{{$store.state.count}}</h3>
</div>
</template>
<script>
import store from '@/vuex/store'
export default{
data(){
return{
msg:'Hello Vuex',
}
},
store
}
</script>
5. mutations
1）在store中添加
const mutations={
add(state){
state.count++;
},
reduce(state){
state.count--;
}
}
2）count.vue中访问mutations
<div>
<button @click="$store.commit('add')">+</button>
<button @click="$store.commit('reduce')">-</button>
</div>
6. state访问对象
1）computed计算书型直接赋值，输出前对data中的值进行改变，把store.js中的state值赋值给模板中的data值
computed:{
count(){
return this.$store.state.count;
}
}
2）通过mapState对象来赋值，在count.vue中
import {mapState} from 'vuex';
computed:mapState({
count:state=>state.count
})
3）通过mapState的数组来赋值
computed:mapState(["count"])
7. 修改Mutations状态
1）当需要传值的时候：给store中的add方法加上参数n
const mutations={
add(state,n){
state.count+=n;
},
reduce(state){
state.count--;
}
}2）在count.vue中
<p>
<button @click="$store.commit('add',10)">+</button>
<button @click="$store.commit('reduce')">-</button>
</p>
3）使用模板方法获取mutations：达到一种可以直接调用的状态，不适用commit传值
import { mapState,mapMutations } from 'vuex';
methods:mapMutations([
'add','reduce'
]),
好像带参数的就要用commit方法了，这里不是很懂。。。
4）模板中使用：
<button @click="reduce">-</button>
8. Getters（可看做store.js的计算属性）
1）store.js中声明、引用
const getters = {
count:function(state){
return state.count +=100;
}
}
export default new Vuex.Store({
state,mutations,getters
})2）在count.vue中（vue构造器中只能有一个属性，使用...对象展开运算符）
computed:{
...mapState(["count"]),
count(){
return this.$store.getters.count;
}
},mapGetters简化模板写法
import { mapState,mapMutations,mapGetters } from 'vuex';类似于mapState
...mapGetters(["count"])9. actions异步修改状态
基本功能类似于mutation
1）store.js中声明
const actions ={
addAction(context){
context.commit('add',10)
},
reduceAction({commit}){
commit('reduce')
}
}
context：上下文对象
commit：将commit对象传入
2）count.vue
<p> <button @click="addAction">+</button> <button @click="reduceAction">-</button> </p>
import { mapState,mapMutations,mapGetters ,mapMutations} from 'vuex';
methods:{
...mapMutations([
'add','reduce'
]),
...mapActions(['addAction','reduceAction'])
},
10. module模块组
1）store.js中声明
const moduleA={
state,mutations,getters,actions
}
export default new Vuex.Store({
modules:{a:moduleA}
})
2）count.vue中使用
<h3>{{$store.state.a.count}}</h3>
computed:{
count(){
return this.$store.state.a.count;
}
},