vuejs - vuex 快速入门

访问量: 3226

下面的笔记有点儿凌乱，请直接来这里看：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: []
})

１．新建 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  用来读取信息

订阅/RSS Feed

Subscribe