VUE - vuex state的使用

vue

1,安装

进入项目目录,执行 vue add vuex 命令

2,会在src的目录下新增store文件夹

3,打开store文件夹下的index.js  ,  给 state 设定一些数据

import Vue from 'vue'

import Vuex from 'vuex'


Vue.use(Vuex)


export default new Vuex.Store({

  state: {

    count:0,

    todos:[

      {id:'1', title:'todoItem1',completed:false},

      {id:'2', title:'todoItem2',completed:false},

      {id:'3', title:'todoItem3',completed:false},

      {id:'4', title:'todoItem4',completed:false},

      {id:'5', title:'todoItem5',completed:false}

    ]

  },

  getters:{


  },

  mutations: {

  },

  actions: {

  },

  modules: {

  }

})

 4, App.vue  来获取这些数据

<template>

  <div >

    <p> {{count}} </p>        <!--  count为computed中注册的方法名  -- >

    <p> {{todos}} </p>

  </div>

</template>


<script>


export default {

  name: 'app',

  computed: {

    count(){

      return this.$store.state.count   //获取 store中state的count

    },

    todos(){

      return this.$store.state.todos

    }

  },

}

</script>

以上是 VUE - vuex state的使用 的全部内容, 来源链接: utcz.com/z/380646.html

回到顶部