我对vuex的理解(一)

Ewall

发布于 2018-09-04 15:37:03

62900

代码可运行

文章被收录于专栏：vue学习vue学习

运行总次数：0

代码可运行

1、安装vue-cli脚手架 2、初始化

src目录下新建一个store文件并新建一个store.js文件
引入vue和vuex并显式的通过Vue.use(Vuex)来安装Vuex

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

3、创建

新建一个state对象（数据源），用于存放数据
新建一个mutations对象，用于修改状态
注册并暴露，让外部可以引用

//store.js文件
//state
const state = {
    count: 0
}
//mutations
const mutations = {
    increment: state => state.count++,
    decrement: state => state.count--
}
//注册、暴露
export default new Vuex.Store({
    state,
    mutations
})

4、创建一个新的子组件（或者你可以把模板自带的App.vue内容删了后直接用）

编写<tempalte/>内容

<template>
  <div>
     <p>{{count}}</p>
     <p>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
     </p>
  </div>
</template>

import引入store.js
定义computed计算属性和methods方法

import store from '@/store/store'

  export default {
     //注册store
      store,
      name: 'app',
      computed: {
          count() {
              return store.state.count
          }
      },   
      methods: {
          increment() {
              store.commit("increment")
          },
          decrement() {
              store.commit("decrement")
          }
      }
  }

上面有几个知识点： 1. 由于vuex的状态存储是响应式的，从store实例中获取状态最简单的方法就是在计算属性中返回某个状态。 2. 通过store.state来获取状态对象，通过store.commit方法触发状态变更。 3. 我这里的store是直接注册在了这个子组件中， Vuex 通过 store 选项，提供了一种机制将状态从根组件『注入』到每一个子组件中,也就是说如果你在根组件里注册了store选项，那么子组件用this.$store就能访问到了。

以上就是官网上那个示例具体到项目中的的简单实现了。参考:https://router.vuejs.org/zh-cn/installation.html

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017.08.15 ，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js