How to use files in vue

Vuex is a state management pattern developed specifically for Vue.js applications. This article mainly introduces the web front-end vue: how to use vuex as a single file. Friends in need can refer to

What is Vuex?

Vuex is a state management pattern developed specifically for Vue.js applications. It uses centralized storage to manage the state of all components of the application, and uses corresponding rules to ensure that the state changes in a predictable way. Vuex is also integrated into Vue’s official debugging tool devtools extension, providing advanced debugging functions such as zero-configuration time-travel debugging, state snapshot import and export, etc.

Last time I used an example of addition and subtraction to explain the basic use of vuex and under what circumstances it is used. Last time I briefly demonstrated this example in a component. This time I extracted vuex into a separate file to manage the status of the entire project in a unified manner.

As I said last time, if your project is large enough, it would be best to use vuex to manage the status of the entire project. If it is a small project, it is not recommended for everyone to use it. Okay, let’s not talk too much about the code:

After you have prepared the project, vue-cli, webpack, vuex, router, etc. are all installed

The first step is to create a new one The content of the file called: store.js is as follows:

import Vue from 'vue' //引入vue
import Vuex from 'vuex' // 引入vuex
Vue.use(Vuex)  // 注册vuex
export default new Vuex.Store({ // 暴露与new vuex
 state: { // 相当于vue里data 存放整个项目的各个状态
  number: 0 
 }，
 mutations: { //相当于vue里的methods放方法的，定义一些可以用来调用和修改state里的状态值
   addFun (state,num) { 
    state.number = num
   }
 }
})

This state management file has been created, and the next step is how to call it

<template>
 {{numbertxt}}
 <button @click="addfun(1)">按钮1</button>
 <button @click="addfun(2)">按钮2</button>
</template> 
<script>
import store from &#39;store.js&#39; // 老样先要引入
 export default{
  store:store, // 定义
  computed: { //实时监听
    numbertxt () { // 实时监听在store.js里的值改变
     return store.state.number
    }
   },
  methods:{
   addfun(num){
    store.commit(&#39;addFun&#39;,num) 
    //显式的提交 (commit) mutation里的方法来改变值
   }
  }
｝
</script>

The whole thing is a little more complicated and the vuex independent extraction That’s it for Li’s examples. If you have friends who don’t understand or like Vue, you can add me on WeChat (nihaomeili87) and let’s make progress together!

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Implementing date selection component in vue mobile terminal

How to package specified JS files separately in webpack

How to implement a circular progress bar in WeChat applet

Implement dynamically importing files in webpack

Relevant tricks in JavaScript

3 basic modes of vue routing parameters (detailed tutorial)

The above is the detailed content of How to use files in vue. For more information, please follow other related articles on the PHP Chinese website!