Vuex-基本使用

引用

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

  import Vue from 'vue'
  import Vuex from 'vuex'

  Vue.use(Vuex)

当使用全局 script 标签引用 Vuex 时，不需要以上安装过程。

项目结构

Vuex 并不限制你的代码结构。但是，它规定了一些需要遵守的规则：

• 应用层级的状态应该集中到单个 store 对象中。
• 提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。
• 异步逻辑都应该封装到 action 里面。

对于大型应用，我们会希望把 Vuex 相关代码分割到模块中。下面是项目结构示例：

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API请求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块

简单的Store

store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex) 


export default new Vuex.Store({
    actions: {
        updataCount ( {commit} ) {
            setTimeout(function(){
                commit('UPDATACOUNT')
            },3000)
          }
    },
    getters: {
        toDouble: (state) =>{
          return    state.count + 2
        }
    },
    state: {
        count: 1
    },
    mutations:{
        UPDATACOUNT: (state) => {
            state.count++
          }
    }
})

app.vue

<template>
  <div id="app">

    <div>{{ count }}</div>
      <button @click="add()">count+1</button>
   </div>
</template>

export default {
  name: 'vue-app',
  computed: {
    count (){
      return this.$store.getters.toDouble
    }
  },
  methods: {
    add () {
      this.$store.commit('UPDATACOUNT')
    }
  }
}

在methods的add方法中,通过$store.commit来调用store中mutations里设置的方法