main.js引入store.js之后
new Vue({
el: ‘#app’,
router,
store, // 所有对象都多了一个属性:KaTeX parse error: Expected 'EOF', got '}' at position 51: …late: '<App/>' }̲) 所以页面上面可以直接用{{store.state.name}}获取 ----name(‘变量名’)
// 分发去触发store的actions
this.$store.dispatch(‘increment’)
自增自加例子
store.js
//
import Vue from “vue”;
import Vuex from “vuex”;
Vue.use(Vuex);
// 状态对象
const state = {
count:0
};
// 包含多个更新state函数的对象
const mutations = {
// 增加的mutation
INCREMENT () {
state.count ++
},
DECREMENT () {
state.count–
}
};
// 包含多个对应事件回调函数的对象
const actions = {
// 增加的action
increment({ commit }) {
// 提交的mutation
commit(“INCREMENT”);
},
decrement({ commit }) {
// 提交的mutation
commit(“DECREMENT”);
},
// 带条件的actions
incrementIfOdd({commit,state}){
if(state.count%2=1){
commit(“INCREMENT”);
}
},
// 异步的actions
incrementAsync({commit}){
// 在actions里面可以直接执行异步代码
setTimeout(() => {
commit(“INCREMENT”);
}, 1000);
}
};
// 包含多个getter计算属性函数的对象
const getters = {
evenOrOdd(state){
return state.count%2=0 ? ‘偶数’ : ‘奇数’
}
};
export default new Vuex.Store({
state,
mutations,
actions,
getters
});
/
组件里面
、、、、、、、
{{count}}{{eventOrOdd}}
设置大小写
ctrl+p 搜索keybings.json 添加配置
{
"key": "ctrl+shift+u",
"command": "editor.action.transformToUppercase",
"when": "editorTextFocus"
},
{
"key": "ctrl+shift+l",
"command": "editor.action.transformToLowercase",
"when": "editorTextFocus"
}