vuex工程整个创建过程

最近开始实习，需要用到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

5. mutations

1）在store中添加

const mutations={
    add(state){
        state.count++;
    },
    reduce(state){
        state.count--;
    }
}

2）count.vue中访问mutations

    +
    -

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中

   +
   -

3）使用模板方法获取mutations：达到一种可以直接调用的状态，不适用commit传值

import { mapState,mapMutations } from 'vuex';

methods:mapMutations([
        'add','reduce'
]),

好像带参数的就要用commit方法了，这里不是很懂。。。

4）模板中使用：

-

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

  +
  -

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中使用

{{$store.state.a.count}}

computed:{
    count(){
        return this.$store.state.a.count;
    }
},