vuex入门(1)-基础概念和使用

一、vuex的概念和作用

vuex是一种专门为vue应用程序开发的状态管理模式
核心是"store"（一个公共管理的仓库）即下图虚线框内的部分

上图呈现了vue组件对状态进行读写的完整事件流：
当组件需要获取状态时，可以直接从State中获取
当组件需要改变状态时：
1- 通过dispatch方法调用Actions
2- Actions通过commit方法调用Mutations
3- Mutations中存放对State的同步修改

vuex的状态存储是响应式的：
当State中的数据发生变化时，通过render获取数据的组件也会相应更新

二、在项目中引入vuex

全局安装

npm install vuex --save

在src目录下，新建store子目录
在store目录下，新建index.js、state.js、actions.js和mutations.js

// index.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state.js'
import mutations from './mutations.js'

Vue.use(Vuex)

export default new Vuex.Store({
  state,
  actions,
  mutations
})

state.js中存放需要共享的数据

// state.js
export default {
  city: ''
}

actions.js中存放自定义的动作（方法）

// actions.js
export default {
  functionName (ctx) {
    xxxxxx
  }

mutations.js中存放对state的修改

// mutaions.js
export default {
  functionName (state) {
    xxxxxx
  }
}

在src/main.js中引入store

import store from './store/index.js'

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

三、组件获取状态

直接使用文本插值的形式即可

{{this.$store.state.xxx}}

四、组件修改状态

在state.js中自定义变量
优先使用localStorage对变量进行赋值

let defaultCity = '上海'
try {
  if (localStorage.city) {
    defaultCity = localStorage.city
  }
} catch (e) {}

export default {
  city: defaultCity
}

在actions.js中自定义一个Action，通过它的commit方法去调用Mutations

export default {
  changeCity (ctx, city) {
    ctx.commit('changeCity', city)
  }
}

在mutations.js中自定义一个方法
接收两个参数，第一个为state，第二个是从子组件或者Action传递过来的数据

export default {
  changeCity (state, city) {
    state.city = city
    try {
      localStorage.city = city
    } catch (e) {}
  }
}

在组件中，编写相应的业务逻辑
（用户点击城市时，让store中的city随之变化）

// template
<div class="area">
    <div class="title border-topbottom">热门城市</div>
    <div class="button-list">
      <div class="button-wrapper"
           v-for="item of hotCities"
           :key="item.id"
           @click="handleCityClick(item.name)"
      >
        <div class="button">{{item.name}}</div>
      </div>
    </div>
  </div>

在handleCityClick方法中，触发 名为changeCity的Action

// script
handleCityClick (city) {
  this.$store.dispatch('changeCity', city)
}

关于vuex更详细的使用方法请参考官方文档