vuex请求变量后存储并使用_状态管理模式—Vuex如何使用？

npm install vuex --save

目录结构/src&＃xff5c;-main.js&＃xff5c;-/store&＃xff5c;-/modules&＃xff5c;-index.js

// index.js
import Vue from &＃39;vue&＃39;
import Vuex from &＃39;vuex&＃39;
import user from &＃39;./modules/user&＃39;
import team from &＃39;./modules/team&＃39;
import product from "./modules/product";
import chat from "./modules/chat";
import notification from "./modules/notification";Vue.use(Vuex)export default new Vuex.Store({modules: {user,team,product,chat,notification},strict: true
})


import Vue from &＃39;vue&＃39;import App from &＃39;./App.vue&＃39;import store from &＃39;./store&＃39;​export default new Vue({render: h &＃61;> h(App),store}).$mount(&＃39;#app&＃39;)


public class User {//成员变量private String name;private Integer age;private String gender;}public class Users {private List users;}

const state &＃61; () &＃61;> ({//Stateusers: [{name: ...,age: ...,gender: ..., },.........]
})


//方法一&＃xff1a;在根实例中注册store选项&＃xff0c;该实例会注入到根组件下的所有子组件中this.$store.state.name​//方法二&＃xff1a;使用mapState辅助函数import { mapState } from &＃39;vuex&＃39;​export default {// ...computed: mapState({// 箭头函数可使代码更简练count: state &＃61;> state.count,​// 传字符串参数 &＃39;count&＃39; 等同于 &＃96;state &＃61;> state.count&＃96;countAlias: &＃39;count&＃39;,​// 为了能够使用 &＃96;this&＃96; 获取局部状态&＃xff0c;必须使用常规函数countPlusLocalState (state) {return state.count &＃43; this.localCount}})}​


public class User {//成员变量private String name;private Integer age;private String gender;}public class Users {private List users;//get方法public List getUsers() {return users;}}

//State
const state &＃61; () &＃61;> ({users: [{name: ...,age: ...,gender: ..., },.........]
})//getter
const getters &＃61; {users: state &＃61;> state.users,
}


public class User {//成员变量private String name;private Integer age;private String gender;}public class Users {private List users;//get方法public List getUsers() {return users;}//返回18岁及以下用户对象public List getChildren() {List children &＃61; new ArrayList<>;for (User item: this.users) {if (item.age <&＃61; 18) {children.add(item)}}return children;}}

//State
const state &＃61; () &＃61;> ({users: [{name: ...,age: ...,gender: ..., },.........]
})//getter
const getters &＃61; {users: state &＃61;> state.users,//返回18岁及以下用户对象children: state &＃61;> state.users,filter(user &＃61;> user.age <&＃61; 18),
}


import { mapGetters } from &＃39;vuex&＃39;export default {computed: {...mapGetters([&＃39;users&＃39;,]),},methods: {printUsers() {//通过mapGetters访问console.log(this.users)//通过属性访问console.log(this.$store.getters.users)}}}


public class User {//成员变量private String name;private Integer age;private String gender;}public class Users {private List users;private Boolean status;//set方法public void setStatus() {this.status &＃61; true; }}

//State
const state &＃61; () &＃61;> ({users: [{name: ...,age: ...,gender: ..., },.........],status: null,
})//mutation
const mutations &＃61; {setStatus(state) {state.status &＃61; true}
}


Users users &＃61; new Users();
users.setStatus();

this.$store.commit("setStatus")


public class User {//成员变量private String name;private Integer age;private String gender;}public class Users {private List users;private Boolean status;//set方法public void setStatus() {this.status &＃61; true; }public void setUser(User user) {this.users.add(user);}}

Users users &＃61; new Users();users.setUser(newUser);

//Stateconst state &＃61; () &＃61;> ({users: [{name: ...,age: ...,gender: ..., },.........],status: null,})//mutationconst mutations &＃61; {setStatus(state) {state.status &＃61; true},setUser(state, user) {state.users.push(user)}}


this.$store.commit(&＃39;setUser&＃39;, user)


import { mapMutations } from &＃39;vuex&＃39;​export default {methods: {...mapMutations([&＃39;setUser&＃39;,]),appendUser(user){this.setUser(user)},}}


//Stateconst state &＃61; () &＃61;> ({users: [{name: ...,age: ...,gender: ..., },.........],status: null,})​//actionconst actions &＃61; {updateUser({commit}) {request({url: &＃39;/user/getNewUser&＃39;method: &＃39;get&＃39;}).then(res &＃61;> {commit(&＃39;setUser&＃39;, res.data)})}}//mutationconst mutations &＃61; {setStatus(state) {state.status &＃61; true},setUser(state, user) {state.users.push(user)}}


this.$store.dispatch(&＃39;updateUser&＃39;)


//Stateconst state &＃61; () &＃61;> ({users: [{name: ...,age: ...,gender: ..., },.........],status: null,})​//actionconst actions &＃61; {appendUser({commit}, user) {commit(&＃39;setUser&＃39;, user)}}//mutationconst mutations &＃61; {setStatus(state) {state.status &＃61; true},setUser(state, user) {state.users.push(user)}}


this.$store.dispatch(&＃39;appendUser&＃39;, newUser)


import { mapActions } from &＃39;vuex&＃39;​export default {// ...methods: {...mapActions([&＃39;appendUser&＃39;,]),test() {this.appendUser(user)}}}


const moduleA &＃61; {state: () &＃61;> ({ ... }),mutations: { ... },actions: { ... },getters: { ... }}​const moduleB &＃61; {state: () &＃61;> ({ ... }),mutations: { ... },actions: { ... }}​const store &＃61; new Vuex.Store({modules: {a: moduleA,b: moduleB}})​store.state.a // -> moduleA 的状态store.state.b // -> moduleB 的状态


目录结构/src&＃xff5c;-main.js&＃xff5c;-/store&＃xff5c;-/modules|-user.js|-team.js|-product.js|-chat.js|-notification.js&＃xff5c;-index.js

//user.jsimport {request} from &＃39;../../lib/network/request&＃39;​//Stateconst state &＃61; () &＃61;> ({users: [{name: ...,age: ...,gender: ..., },.........],status: null,})​//actionconst actions &＃61; {updateUser({commit}) {request({url: &＃39;/user/getNewUser&＃39;method: &＃39;get&＃39;}).then(res &＃61;> {commit(&＃39;setUser&＃39;, res.data)})}}​//getterconst getters &＃61; {users: state &＃61;> state.users,//返回18岁及以下用户对象children: state &＃61;> state.users,filter(user &＃61;> user.age <&＃61; 18),}//mutationconst mutations &＃61; {setStatus(state) {state.status &＃61; true},setUser(state, user) {state.users.push(user)}}​export default {state,getters,actions,mutations}


//index.jsimport Vue from &＃39;vue&＃39;import Vuex from &＃39;vuex&＃39;import user from &＃39;./modules/user&＃39;import team from &＃39;./modules/team&＃39;import product from "./modules/product";import chat from "./modules/chat";import notification from "./modules/notification";​Vue.use(Vuex)​export default new Vuex.Store({modules: {user,team,product,chat,notification},//严格模式&＃xff1a;无论何时发生了状态变更且不是由 mutation 函数引起的&＃xff0c;将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。strict: true})​


//main.jsimport Vue from &＃39;vue&＃39;import App from &＃39;./App.vue&＃39;import store from &＃39;./store&＃39;​export default new Vue({render: h &＃61;> h(App),store}).$mount(&＃39;#app&＃39;)