Vuex入门

随手记

笔记整理，记录下vuex的基本用法，看完这个就可以算是入门了

什么是Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

安装

直接下载 / CDN 引用

下载链接 基于 NPM 的 CDN 链接，该链接会一直指向 NPM 上发布的最新版本。
您也可以通过 https://unpkg.com/vuex@2.0.0 这样的方式指定特定的版本。
在 Vue 之后引入 vuex 会进行自动安装： 

1
2
<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>

npm/yarn

1
npm install vuex --save

或者 

1
yarn add vuex

在一个模块化的打包系统中，您必须显式地通过 Vue.use() 来安装 Vuex： 

1
2
3
4
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

开始

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)

  • state相当于vue中的data
  • getter相当于vue中的计算属性computed
  • mutation、action就是方法methods
  • module如同字面上的意思模块

目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
├── App.vue
├── main.js
├── components
│   ├── component-A.vue
│   └── ...
├── views
│   ├── home.vue
│   └── ...
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    └── modules
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块

store/index.js

1
2
3
4
5
6
7
8
9
10
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({

})

export default store;

main.js

1
2
3
4
5
6
7
8
9
10
11
import Vue from "vue";
import App from "./App.vue";
import store from "./store";

Vue.config.productionTip = false;

const app=new Vue({
    router,
    store,
    render: h => h(App),
}).$mount("#app");

State

1
2
3
4
5
const store = new Vuex.Store({
    state:{
      a: 1
    }
})

外部调用

1
this.$store.state.a  // 1

Getter

1
2
3
4
5
6
7
8
9
10
11
12
13
const store = new Vuex.Store({
    state:{
      a: 1,
      b: 2
    },
    getters:{
      getA: state => state.a,
      ab(state){
        return state.a + state.b;
      },
      sum: (state) => num => state.a + num;
    }
})

外部调用

1
2
3
4
5
this.$store.getters.getA   // 1

this.$store.getters.ab   // 3

this.$store.getters.sum(10)   // 11

Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const store = new Vuex.Store({
    state:{
      a: 1,
      b: 2
    },
    mutations:{
      setA(state,num){
        state.a = num;
      },
      change(state){
        [state.a,state.b] = [state.b,state.a];
      }
    }
})

外部调用

1
2
3
4
5
6
7
8
this.$store.commit('change')

this.$store.state.a   // 2
this.$store.state.b   // 1

this.$store.commit('setA',100)

this.$store.state.a   // 100

Action

Action 类似于 mutation，不同在于：

  • Action 提交的是 mutation，而不是直接变更状态。
  • Action 可以包含任意异步操作。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const store = new Vuex.Store({
    state:{
      a: 1,
      b: 2
    },
    mutations:{
      setA(state,num){
        state.a = num;
      },
      change(state){
        [state.a,state.b] = [state.b,state.a];
      }
    },
    actions:{
      updateA(context,num){
        context.commit('setA',num)
      },
      change({commit}){
        commit('change')
      }
    }
})

外部调用

1
2
this.$store.dispatch('updateA',100)
this.$store.dispatch('change')

Module

每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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 的状态

更详细内容,请移步vuex文档
此文是为了照顾只有7秒记忆的自己用的