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函数，传两个参数，一个是函数名称，另外一个是自定义参数。