vuex 安装步骤包括:安装 vuex 依赖项 npm install vuex --save。创建 vuex 存储,在 src 目录建立 store.js 文件并导入、使用 vuex。在 vue 实例中注入 vuex 存储,在 main.js 文件中导入并使用 store。在组件中使用 vuex,使用 mapstate、mapmutations 和 mapactions 辅助函数映射状态、突变和动作到组件。
如何安装 Vuex
步骤:
1. 安装 Vuex
npm install vuex --save
2. 创建 Vuex 存储
立即学习“前端免费学习笔记(深入)”;
在 src 目录下创建一个名为 store.js 的文件:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
// 你的状态对象
},
mutations: {
// 你的突变对象
},
actions: {
// 你的动作对象
},
getters: {
// 你的获取器对象
}
})
export default store
3. 在 Vue 实例中注入 Vuex 存储
在 main.js 文件中:
import Vue from 'vue'
import App from './App.vue'
import store from './store'
new Vue({
store,
render: h => h(App)
}).$mount('#app')
4. 在组件中使用 Vuex
- 映射状态:使用 mapState 辅助函数将 Vuex 状态映射到组件数据:
import { mapState } from 'vuex'
export default {
computed: {
...mapState([
'stateVariable1',
'stateVariable2'
])
}
}
- 映射突变:使用 mapMutations 辅助函数将 Vuex 突变映射到组件方法:
import { mapMutations } from 'vuex'
export default {
methods: {
...mapMutations([
'mutation1',
'mutation2'
])
}
}
- 映射动作:使用 mapActions 辅助函数将 Vuex 动作映射到组件方法:
import { mapActions } from 'vuex'
export default {
methods: {
...mapActions([
'action1',
'action2'
])
}
}