집 >웹 프론트엔드 >JS 튜토리얼 >Vuex를 어떻게 사용하나요? vuex 사용 단계에 대한 자세한 설명(코드 포함)

Vuex를 어떻게 사용하나요? vuex 사용 단계에 대한 자세한 설명(코드 포함)

php中世界最好的语言원래의: 2018-04-28 13:37:3964855검색

vuex 사용 방법: 1. Vue 스캐폴딩 도구를 사용하여 프로젝트를 빌드합니다. 2. npm 패키지 관리 도구를 사용하여 vuex를 설치합니다. 3. 새 저장소 폴더를 만들고 해당 폴더 아래에 새 "store.js" 파일을 만듭니다. 4. 파일에 vue 및 vuex를 추가합니다.

vuex를 사용하는 방법은 무엇인가요? 이번에는 vuex를 사용하는 단계(코드 포함)에 대해 자세히 설명하고, vuex 사용 시 주의 사항은 무엇이며, 다음은 실제 사례이므로 살펴보겠습니다.

Vuex란 무엇인가요?

vuex는 vue.js용으로 특별히 설계된 중앙 집중식 상태 관리 아키텍처입니다. 상태? 데이터의 속성을 상태라고 하는 다른 vue 구성 요소와 공유해야 하는 부분으로 이해합니다. 간단히 말해서 데이터에서 공유해야 하는 속성입니다.

Vuex 소개(Vue 스캐폴딩 도구를 사용하여 프로젝트를 구축한 경우)

1 npm 패키지 관리 도구를 사용하여 vuex를 설치합니다. 제어 명령줄에 다음 명령을 입력하면 됩니다.

 npm install vuex --save

프로덕션 환경에서 패키지를 사용할 것이기 때문에 여기에 -save를 추가해야 한다는 점에 유의해야 합니다.

2. 새 저장소 폴더를 만들고(필수는 아님) 폴더 아래에 새 store.js 파일을 만들고 파일에 vue 및 vuex를 도입합니다.

 import Vue from 'vue';
 import Vuex from 'vuex';

3. vuex를 사용하고, 가져온 후 Vue.use를 사용하여 참조하세요.

 import Vue from 'vue';
 import Vuex from 'vuex';

이 세 단계를 거치면 vuex가 성공적으로 참조되더라도 재미있게 즐길 수 있습니다.

4. main.js

 import storeConfig from './vuex/store'

5에 새 vuex 파일을 추가합니다. 그런 다음 Vue 개체를 인스턴스화할 때 저장소 개체를 추가합니다.:

 new Vue({
  el: '#app',
  router,
  store,//使用store
  template: '<App/>',
  components: { App }
 })

데모

1. store.js 파일에 대한 상수 객체입니다. store.js 파일은 vuex를 도입했을 때의 파일입니다.

 const state = {
  count:1
 }

2. 외부에서 참조할 수 있도록 내보내기 기본값을 사용하여 코드를 캡슐화합니다.

 export default new Vuex.Store({
  state
 });

3. 구성 요소 폴더에 count.vue라는 새 vue 템플릿을 만듭니다. 템플릿에서는 방금 생성한 store.js 파일을 소개하고 {{$store.state.count}}를 사용하여 템플릿에 카운트 값을 출력합니다. {{$store.state.count}}输出count 的值。

 <template>
  <p>
   <h2>{{msg}}</h2>
   <hr/>
   <h3>{{$store.state.count}}</h3>
  </p>
 </template>
 <script>
  import store from '@/vuex/store'
  export default{
   data(){
    return{
     msg:'Hello Vuex',
    }
   },
   store
  }
 </script>

4、在store.js文件中加入两个改变state的方法。

const mutations={
  add(state){
   state.count+=1;
  },
  reduce(state){
   state.count-=1;
  }
 }

这里的mutations是固定的写法，意思是改变的，所以你先不用着急，只知道我们要改变state的数值的方法，必须写在mutations里就可以了。

5、在count.vue模板中加入两个按钮，并调用mutations中的方法。

 <p>
  <button @click="$store.commit(&#39;add&#39;)">+</button>
  <button @click="$store.commit(&#39;reduce&#39;)">-</button>
 </p>

这样进行预览就可以实现对vuex中的count进行加减了。

state访问状态对象

const state ，这个就是我们说的访问状态对象，它就是我们SPA（单页应用程序）中的共享值。

学习状态对象赋值给内部对象，也就是把stroe.js中的值，赋值给我们模板里data中的值。有三种赋值方式

一、通过computed的计算属性直接赋值

computed属性可以在输出前，对data中的值进行改变，我们就利用这种特性把store.js中的state值赋值给我们模板中的data值。

 computed:{
  count(){
   return this.$store.state.count;
  }
 }

这里需要注意的是return this.$store.state.count

import {mapState} from 'vuex';

4. store.js 파일에 상태를 변경하는 두 가지 메서드를 추가합니다.

 computed:mapState({
   count:state=>state.count //理解为传入state对象，修改state.count属性
  })

여기의 돌연변이는 고정된 방식으로 작성되었습니다. 즉, 변경될 수 있으므로 걱정할 필요가 없습니다. 상태 값을 변경하려는 방식은 돌연변이로 작성되어야 한다는 점만 알아두세요. 5. count.vue 템플릿에 두 개의 버튼을 추가하고 돌연변이에서 메서드를 호출하세요.

 computed:mapState(["count"])

이런 식으로 미리보기를 하면 vuex에서 개수를 더하거나 뺄 수 있습니다.

state 액세스 상태 개체

const state , 이를 액세스 상태 개체라고 부르며 SPA(단일 페이지 애플리케이션)에서 공유되는 값입니다. 학습 상태 개체를 내부 개체에 할당합니다. 즉, strobe.js에 값을 할당합니다. 템플릿에 있는 데이터의 값입니다. 할당 방법은 세 가지가 있습니다

1. 계산된 계산 속성을 통한 직접 할당

🎜🎜🎜 계산된 속성은 출력 전에 데이터의 값을 변경할 수 있습니다. 이 기능을 사용하여 store.js에서 상태 값을 변경하겠습니다. 템플릿의 데이터 값입니다. 🎜

Mutations修改状态（$store.commit( )）

🎜 여기서 주목해야 할 것은 return this.$store.state.count라는 문장입니다. 꼭 적어주세요. 그렇지 않으면 $store를 찾을 수 없습니다. 이 쓰기 방법은 이해하기 쉽지만 쓰기가 더 번거롭습니다. 두 번째 쓰기 방법을 살펴보겠습니다. 🎜🎜🎜🎜2. mapState 객체를 통해 값 할당🎜🎜🎜🎜먼저 import를 사용하여 mapState를 도입해야 합니다. 🎜

 <button @click="$store.commit(&#39;add&#39;)">+</button>
 <button @click="$store.commit(&#39;reduce&#39;)">-</button>

🎜그런 다음 계산 속성에 다음 코드를 작성합니다. 🎜

 const mutations={
  add(state){
   state.count+=1;
  },
  reduce(state){
   state.count-=1;
  }
 }

🎜여기에서는 ES6 화살표 함수를 사용하여 count에 값을 할당합니다. 🎜🎜🎜🎜3. mapState의 🎜array🎜🎜🎜🎜

 const mutations={
  add(state,n){
   state.count+=n;
  },
  reduce(state){
   state.count-=1;
  }
 }

🎜를 통해 값을 할당하는 방법으로, 실제 프로젝트 개발에서 자주 사용됩니다. 🎜

Mutations修改状态（$store.commit( )）

Vuex提供了commit方法来修改状态，我们粘贴出Demo示例代码内容，简单回顾一下，我们在button上的修改方法。

 <button @click="$store.commit(&#39;add&#39;)">+</button>
 <button @click="$store.commit(&#39;reduce&#39;)">-</button>

store.js文件：

 const mutations={
  add(state){
   state.count+=1;
  },
  reduce(state){
   state.count-=1;
  }
 }

传值：这只是一个最简单的修改状态的操作，在实际项目中我们常常需要在修改状态时传值。比如上边的例子，是我们每次只加1，而现在我们要通过所传的值进行相加。其实我们只需要在Mutations里再加上一个参数，并在commit的时候传递就就可以了。我们来看具体代码：

现在store.js文件里给add方法加上一个参数n。

 const mutations={
  add(state,n){
   state.count+=n;
  },
  reduce(state){
   state.count-=1;
  }
 }

在Count.vue里修改按钮的commit( )方法传递的参数，我们传递10，意思就是每次加10.

 <p>
  <button @click="$store.commit(&#39;add&#39;,10)">+</button>
  <button @click="$store.commit(&#39;reduce&#39;)">-</button>
 </p>

模板获取Mutations方法

实际开发中我们也不喜欢看到$store.commit( )这样的方法出现，我们希望跟调用模板里的方法一样调用。
例如：@click=”reduce” 就和没引用vuex插件一样。要达到这种写法，只需要简单的两部就可以了：

1、在模板count.vue里用import 引入我们的mapMutations：

 import { mapState,mapMutations } from 'vuex';

2、在模板的<\script>标签里添加methods属性，并加入mapMutations

 methods:mapMutations([
   'add','reduce'
 ]),

通过上边两部，我们已经可以在模板中直接使用我们的reduce或者add方法了，就像下面这样。

 <button @click="reduce">-</button>

getters计算过滤操作

getters从表面是获得的意思，可以把他看作在获取数据之前进行的一种再编辑,相当于对数据的一个过滤和加工。你可以把它看作store.js的计算属性。

getters基本用法：

比如我们现在要对store.js文件中的count进行一个计算属性的操作，就是在它输出前，给它加上100.我们首先要在store.js里用const声明我们的getters属性。

 const getters = {
  count:function(state){
   return state.count +=100;
  }
 }

写好了gettters之后，我们还需要在Vuex.Store()里引入，由于之前我们已经引入了state和mutations，所以引入里有三个引入属性。代码如下，

 export default new Vuex.Store({
  state,mutations,getters
 })

在store.js里的配置算是完成了，我们需要到模板页对computed进行配置。在vue 的构造器里边只能有一个computed属性，如果你写多个，只有最后一个computed属性可用，所以要对上节课写的computed属性进行一个改造。改造时我们使用ES6中的展开运算符”…”。

 computed:{
  ...mapState(["count"]),
  count(){
   return this.$store.getters.count;
  }
 },

需要注意的是，你写了这个配置后，在每次count 的值发生变化的时候，都会进行加100的操作。

用mapGetters简化模板写法

我们都知道state和mutations都有map的引用方法把我们模板中的编码进行简化，我们的getters也是有的，我们来看一下代码。

首先用import引入我们的mapGetters

 import { mapState,mapMutations,mapGetters } from 'vuex';

在computed属性中加入mapGetters

 ...mapGetters(["count"])

actions异步修改状态

actions和之前讲的Mutations功能基本一样，不同点是，actions是异步的改变state状态，而Mutations是同步改变状态。至于什么是异步什么是同步这里我就不做太多解释了，如果你不懂自己去百度查一下吧。

在store.js中声明actions

actions是可以调用Mutations里的方法的，我们还是继续在上节课的代码基础上进行学习，在actions里调用add和reduce两个方法。

 const actions ={
  addAction(context){
   context.commit('add',10)
  },
  reduceAction({commit}){
   commit('reduce')
  }
 }

在actions里写了两个方法addAction和reduceAction，在方法体里，我们都用commit调用了Mutations里边的方法。细心的小伙伴会发现这两个方法传递的参数也不一样。

•ontext：上下文对象，这里你可以理解称store本身。
•{commit}：直接把commit对象传递过来，可以让方法体逻辑和代码更清晰明了。

模板中的使用

我们需要在count.vue模板中编写代码，让actions生效。我们先复制两个以前有的按钮，并改成我们的actions里的方法名，分别是：addAction和reduceAction。

  <p>
   <button @click="addAction">+</button>
   <button @click="reduceAction">-</button>
  </p>

改造一下我们的methods方法，首先还是用扩展运算符把mapMutations和mapActions加入。

  methods:{
    ...mapMutations([ 
      'add','reduce'
    ]),
    ...mapActions(['addAction','reduceAction'])
  },

你还要记得用import把我们的mapActions引入才可以使用。

增加异步检验

我们现在看的效果和我们用Mutations作的一模一样，肯定有的小伙伴会好奇，那actions有什么用，我们为了演示actions的异步功能，我们增加一个计时器（setTimeOut）延迟执行。在addAction里使用setTimeOut进行延迟执行。

  setTimeOut(()=>{context.commit(reduce)},3000);
  console.log('我比reduce提前执行');

我们可以看到在控制台先打印出了‘我比reduce提前执行'这句话。

module模块组

随着项目的复杂性增加，我们共享的状态越来越多，这时候我们就需要把我们状态的各种操作进行一个分组，分组后再进行按组编写。那今天我们就学习一下module：状态管理器的模块组操作。

声明模块组：

在vuex/store.js中声明模块组，我们还是用我们的const常量的方法声明模块组。代码如下:

  const moduleA={
    state,mutations,getters,actions
  }

声明好后，我们需要修改原来 Vuex.Stroe里的值：

  export default new Vuex.Store({
    modules:{a:moduleA}
  })

在模板中使用

现在我们要在模板中使用count状态，要用插值的形式写入。

<h3>{{$store.state.a.count}}</h3>

如果想用简单的方法引入，还是要在我们的计算属性中rutrun我们的状态。写法如下：

  computed:{
    count(){
      return this.$store.state.a.count;
    }
  },

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

Vuex를 어떻게 사용하나요? vuex 사용 단계에 대한 자세한 설명(코드 포함)

관련 기사