Back

vuejs - vuex 快速入门

发布时间: 2017-03-12 04:17:00

下面的笔记有点儿凌乱,请直接来这里看:https://vuex.vuejs.org/zh-cn/structure.html

一个例子:

我希望把页面的title  都保存到vuex中.

0. 新建文件: vuex/store.js , 这个是最最核心的文件.内容如下:

import Vue from 'Vue'
import Vuex from 'Vuex'

import title from './modules/title'   // 这个就是我们后续会用到的title 状态.
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'
module.exports = new Vuex.Store({
    modules: {
        title
    },
    strict: debug,
    middlewares: []
})

1.新建 src/vuex/modules/title.js

import {
  GET_TITLE,
  SET_TITLE
} from '../mutation_types'

const state = { 
  title: '途铃机场服务'
}

// 使用 state.title 也可以.代替这个函数.
const getters = { 
  get_title: state => {
    return state.title
  }
}

const mutations = { 
  [SET_TITLE](state, data){
    state.title = data
  }
}
  //然后记得务必加上这个函数:
module.exports  = {
  state, 
  mutations,
  getters,
  // 如果前面写了action, 这里还要加上actions
}


2. 因为是大型项目,多人协作,所以,要规定好固定的mutation(进化)的常量. 所以,把所有可能的mutation 都写在一起.

// 修改 src/vuex/mutation_types.js
export const GET_TITLE='GET_TITLE'
export const SET_TITLE='SET_TITLE'

3. 在对应的vue页面,开始使用这个store: 

<script>
import store from '../vuex/store'
import { SET_TITLE } from '../vuex/mutation_types'
module.exports = {
    store,
    data(){
      // 其他代码...
    },
    created() { 
        console.info('before: ' )
        console.info(store.state.title)   // 这里只会打印出一个[Object], 不可读,只能通过Vue 插件来看.
        console.info(store.getters.get_title)   // 这里可以打印出String.
        store.commit(SET_TITLE, 'new title')        // 这里是对store中的title进行设置.
    }
}
</script>

src/vuex 文件夹

modules     定义了不同的模块(例如用户状态, 选择的语言等)

mutation_types  定义所有的常量

store.js

store.js 是最核心的内容.

new Vuex.store 是最重要的.

user_info.js:  (module 中的一个)

import: 引入各种常量.

state : 可以认为是个数据库. 保存数据.

mutations: 

[GET_BASE_INFO] (state, data) { ... }

const actions 

store.dispatch(SET_BASE_INFO, this.user_id)  就是调用.

store.getter.GET_BASE_INFO  用来读取信息

Back