vuex的使用
安装
在vue ui中的插件处安装
使用
在 store 文件夹下面的 index.js 处
import { createStore } from 'vuex'
export default createStore({
state: {
},
getters: {
},
mutations: {
},
actions: {
},
modules: {
}
})state 存放的是变量， getters 存放的是需要由 state 中的变量动态计算生成的变量， mutations 存放的是直接对 state 中变量进行修改的函数， actions 存放的是对 state 的各种更新方式（不能对state进行直接修改）， modules 可以将 state 进行分割，避免代码过长。
在标签中使用变量
示例：
<ul class="navbar-nav" v-if="!$store.state.user.is_login">
<li class="nav-item">
<router-link class="nav-link" :to="{name: 'login', params: {}}">登录</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" :to="{name: 'register', params: {}}">注册</router-link>
</li>
</ul>
<ul class="navbar-nav" v-else>
<li class="nav-item">{{ $store.state.user.username }}</li>
</ul>使用 $store 访问store，user是一个module，所以通过这样的方式来访问user中的is_login变量
在 script 中使用
示例：
import { useStore } from 'vuex';
export default {
name: 'UserListView',
components: {
},
setup() {
const store = useStore();
console.log(store.state.user.username);
}
}在外部使用 actions 中的函数需要用到 useStore 这个组件
例如：
setup() {
const store = useStore();
const login = () => {
store.dispatch("login", {
username: username.value,
password: password.value,
succuss() {
console.log("success");
},
error() {
console.log("error");
}
})
}
return {
login
}
}这里用 store 来接收 useStore() 返回的对象，使用 store.dispatch 来调用 login 函数， store.dispatch 传了两个参数，第一个是函数名，第二个是数据。
user.js:
import $ from 'jquery';
const ModuleUser = {
state: {
id: "",
username: "",
photo: "",
followerCount: 0,
},
getters: {
},
mutations: {
},
actions: {
login(context, data) {
console.log(data);
$.ajax({
url: "xxx",
type: "POST",
data: {
username: data.username,
password: data.password,
},
success(resp) {
console.log(resp)
}
})
}
},
modules: {
}
};
export default ModuleUser;actions中的login函数两个参数，第一个是上下文context，里面有很多自带的api，第二个是数据，可以通过外部使用这个函数时传入。
index.js:
import { createStore } from 'vuex'
import ModuleUser from './user'
export default createStore({
state: {
},
getters: {
},
mutations: {
},
actions: {
},
modules: {
user: ModuleUser,
}
})这里user单独写一个module独立出去，只要在index.js中引入并在modules中添加这个变量即可。
mutations 中的函数需要传两个参数一个是 state 用来访问state中的变量，另外一个是自定义的参数。
mutations: {
updateUser(state, user) {
state.id = user.id;
state.username = user.username;
state.photot = user.photo;
state.followerCount = user.followerCount;
state.access = user.access;
state.refresh = user.refresh;
state.is_login = user.is_login;
},
},在 actions 中使用 mutations 中的函数示例：
context.commit("updateUser", {
...resp,
access: access,
refresh: refresh,
is_login: true,
})使用 context 中的commit函数，传两个参数，一个是函数名称，另外一个是自定义参数。