VUE - vuex state的使用
Posted 500m
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VUE - vuex state的使用相关的知识，希望对你有一定的参考价值。
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 id="app">
<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的使用的主要内容，如果未能解决你的问题，请参考以下文章
Vue 之 vuex 解决刷新页面 state 数据丢失的问题，使用vuex-persistedstate进行state持久化
Vuex内容解析和vue cli项目中使用状态管理模式Vuex