Vuex是一个专门为Vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。使用Vuex可以让我们更方便地管理组件之间的状态,以及更新状态的方式。Vuex的使用步骤如下:
安装Vuex:使用npm或者yarn安装Vuex
创建Store:创建一个store.js文件,用来存放状态
创建State:在store.js中定义state,用来存放状态
创建Mutations:在store.js中定义mutations,用来更新state
创建Actions:在store.js中定义actions,用来提交mutations
在Vue实例中使用Vuex:在Vue实例中引入store.js,并使用Vuex
下面是一个使用Vuex的示例:
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
export default store
// main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'
new Vue({
el: '#app',
store,
render: h => h(App)
})
// App.vue
<template>{{ count }}
<button @click="increment">Increment</button>
版权归原作者 JohnJill 所有, 如有侵权,请联系我们删除。