~~~
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 相當于data對象的狀態對象
const state = {
count: 0 //指定初始化數據
}
// 包含多個更新狀態的方法的對象
const mutations = {
INCREMENT (state) {
state.count ++
},
DECREMENT (state) {
state.count --
}
}
// 包含多個間接更新狀態的方法的對象
const actions = {
increment ({commit}) {
commit('INCREMENT')
},
decrement ({commit}) {
commit('DECREMENT')
},
incrementIfOdd ({commit, state}) {
if(state.count%2===1){
commit('INCREMENT')
}
},
incrementAsync ({commit}) {
setTimeout(()=>{
commit('INCREMENT')
}, 1000)
}
}
// 包含多個getters計算屬性的對象
const getters = {
evenOrOdd (state) {
return state.count % 2 ? '偶數' : '奇數'
}
}
export default new Vuex.Store({
state,
mutations,
actions,
getters
})
~~~
- 開發工具
- VsCode
- 常用插件
- Html5
- 標簽
- video
- form
- 讀取文件
- 地理位置
- canvas
- 本地存儲
- localStorage
- sessionStorage
- 網絡狀態
- Css3
- 背景
- 邊框
- 邊框圖片
- 文字陰影
- 漸變
- Js
- ES6
- 常量和變量
- 模板字符串
- 箭頭函數
- 解構賦值
- Spread Operator
- import export
- Promise
- 打包
- webpack
- 安裝
- 為什么要打包
- 核心概念
- 熱更新
- 入門例子
- js打包
- css打包
- vue
- 簡介
- Vue-cli
- 搭建
- 打包發布
- eslint
- Mint-ui
- Vuex
- 狀態管理模式
- 使用
- main.js
- store
- component
- Mockjs
- 簡介
- EasyMock