在src下新建store/index.js
main.js
import store from './store' Vue.use(Vuex) new Vue({ el: '#app', router, store, components: { App }, template: '<App/>' })
store / index.js
import Vue from 'vue' import {get,post} from '@/assets/js/myrequest' import Vuex from 'vuex' Vue.use(Vuex) const moduleA = { namespaced: true, state: { m1_count: 1 }, mutations: { increment(state) { state.m1_count++ } }, getters: { doubleCount(state) { return state.m1_count * 2 } } } export default new Vuex.Store({ state: { count: 1, storeList: [{ name: '张三', age: 5, gender: 1 }, ], actionList: [] }, getters: { ageAdd(state) { state.storeList.forEach(item => { item.age = item.age + '岁' if (item.gender == 1) { item.gender = '男' } else if (item.gender == 0) { item.gender = '女' } }) return state.storeList }, }, mutations: { add_User(state, data) { console.log(state.moduleA.m1_count); state.storeList.push(data) }, up_actionList(state, data) { state.actionList = data } }, actions: { async getList(context) { console.log(context); let res = await get(`/api/nba/platform/classify/list`) let { data } = res console.log(res); context.commit('up_actionList', data) } }, modules: { moduleA, // moduleB } })
组建中使用
<template> <div> <div> {{actionList}} <div v-for="(item, index) in ageAdd" :key="index"> <span>{{item.name}}---{{item.age}}---{{item.gender}}</span> </div> <div> 姓名:<input type="text" v-model="name"> 性别:<input type="text" v-model="gender"> 年龄:<input type="text" v-model="age"> <button @click="addUser">add</button> </div> </div> </div> </template> <script> import VueTagsInput from '@johmun/vue-tags-input'; import { mapState, mapGetters, mapMutations, mapActions } from 'vuex' export default { components: { VueTagsInput, }, computed: { ...mapState(['count', 'actionList']), ...mapGetters(['ageAdd']) }, data() { return { tag:'', tags: [], gender: '', name: '', age: '', autocompleteItems: [ {text: '张三'} ] }; }, methods: { ...mapMutations(['add_User']), ...mapActions(['getList']), addUser(){ let params = { name: this.name, gender: this.gender, age: this.age, } // this.add_User(params) this.$store.commit('add_User', params) }, }, mounted(){ this.getList() // this.$store.dispatch('getList') } } </script>
每个应用将仅仅包含一个 store 实例
getter: 1. 当组装的数据需要再多个地方使用时,可以用getter(过滤计算等操作)
2. 可以认为是store的计算属性
mutation: 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
方式1. this.$store.commit('add_User', params)
方式2. ...mapMutations(['add_User']),
this.add_User(params)
action: 类似motation,提交的是mutation而不是直接变更状态;可以包含异步操作