zoukankan      html  css  js  c++  java
  • 我对vuex的理解(一)

    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内容删了后直接用)

    编写内容

    <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

  • 相关阅读:
    Mark
    个人作业——软件工程实践总结作业
    个人作业——软件产品案例分析
    个人技术博客(α)
    软件工程实践_结对Task2_ student_department_matching
    软件工程实践_Task2_sudoku
    软件工程实践_Task1
    面向对象程序设计_Task7_Summary
    面向对象程序设计__Task6_Calculator1.6.2
    C++课堂作业_02_PAT1025.反转链表
  • 原文地址:https://www.cnblogs.com/liliuyu/p/13067133.html
Copyright © 2011-2022 走看看