本篇教程将以计数器及列表展示两个例子来讲解 vuex 的简单用法
本案例 github https://github.com/axel10/Vuex_demo-Counter-and-list
从安装到启动初始页面的过程都直接跳过注意安装时选择需要路由
首先, src 目录下新建 store 目录及相应文件, 结构如下:
index.js 文件内容:
- import Vue from "vue"import Vuex from 'vuex'Vue.use(Vuex); // 务必在 new Vuex.Store 之前 use 一下
- export
- default new Vuex.Store({
- state:
- {
- count:
- 0 // 计数器的 count
- },
- mutations: {
- increment(state) {
- state.count++
- }
- }
- })
src 下的 main.js 里注册 store
- new Vue({
- el: '#app',
- router,
- store, // 注册 store
- components: { App },
- template: '<App/>'
- });
components 文件夹内新建 Num.vue 组件, 内容如下
- <template>
- <div>
- <input type="button" value="+" @click="incr" />
- <input type="text" id="input" v-model="count"/>
- <input type="button" value="-"/>
- <br/>
- <router-link to="/list"> 列表 demo</router-link>
- </div>
- </template>
- <script>
- import store from '../store'
- export default {
- computed:{
- count:{
- get:function () {
- return store.state.count
- },
- set:function (val) {
- store.state.count = val
- }
- }
- },
- methods:{
- incr(){
- // store.commit("increment")
- store.commit("increment") // 触发修改
- }
- }
- }
- </script>
- <!-- Add "scoped" attribute to limit CSS to this component only -->
- <style scoped>
- </style>
router 文件夹内配置路由:
- import Vue from 'vue'
- import Router from 'vue-router'
- import Num from '../components/Num'
- import List from '../components/List'
- Vue.use(Router)
- export default new Router({
- routes: [
- {
- path:'/num',
- component:Num
- },
- {
- path:"*",
- redirect:"/num"
- }
- ]
- })
完成后启动, 即可看到结果计数器演示完成
现在开始列表演示
src 目录下新建 api 文件夹, 再新建 api 文件
- api/cover.js:
- const _cover = [
- {"id": 1, "title": "iPad 4 Mini", "price": 500.01, "inventory": 2},
- {"id": 2, "title": "H&M T-Shirt White", "price": 10.99, "inventory": 10},
- {"id": 3, "title": "Charli XCX - Sucker CD", "price": 19.99, "inventory": 5}
- ];
- export default {
- getCover(cb) {
- setTimeout(() => cb(_cover), 100);
- /* $.get("/api/data",function (data) {
- console.log(data);
- })*/
- },
- }
修改 store/modules/cover.js:(定义数据模型)
- import cover from '../../api/cover'
- const state = {
- all:[]
- };
- const getters={
- allCover:state=>state.all //getter 用来提供访问接口
- };
- const actions = {
- getAllCover({commit}){
- cover.getCover(covers=>{
- commit('setCover',covers) // 触发 setCover 修改
- })
- },
- removeCover({commit},cover){
- commit('removeCover',cover)
- }
- };
- const mutations = { //mutations 用来修改 state
- setCover(state,covers){
- state.all = covers
- },
- removeCover(state,cover){
- console.log(cover.id);
- state.all = state.all.filter(function (OCover) {
- return OCover.id !== cover.id
- })
- }
- };
- export default {
- state,getters,actions,mutations
- }
store 内的 index.js 中注册数据模型:
- import Vue from "vue"
- import Vuex from 'vuex'
- import cover from './modules/cover'
- Vue.use(Vuex); // 务必在 new Vuex.Store 之前 use 一下
- export default new Vuex.Store({
- modules:{
- cover // 注册 cover 数据模型
- },
- state:{
- count:0 // 计数器的 count
- },
- mutations:{
- increment(state){
- state.count++
- }
- }
- })
components 文件夹内新建 List.vue 组件, 内容如下:
- <template>
- <div class="list">
- <ul>
- <li v-for="cover in covers" @click="removeCover(cover)">
- {{cover.title}}
- </li>
- </ul>
- <p>
- {{covers}}
- </p>
- <h2 > 请尝试点击 li</h2>
- <router-link to="/num"> 计数器 demo</router-link>
- </div>
- </template>
- <script>
- import {mapGetters,mapActions} from 'vuex';
- export default {
- computed:mapGetters({
- covers:"allCover" // 利用 module 的 getter 获得数据
- }),
- methods:mapActions([
- 'removeCover' // 利用 module 的 action 删除数据
- ]),
- created(){
- this.$store.dispatch('getAllCover') // 调用 cover 数据模型的 getAllCover action 用来初始化列表数据
- }
- }
- </script>
- <!-- Add "scoped" attribute to limit CSS to this component only -->
- <style scoped>
- .list{
- text-align: left;
- }
- </style>
路由中注册新组件:
- import Vue from 'vue'
- import Router from 'vue-router'
- import Num from '../components/Num'
- import List from '../components/List'
- Vue.use(Router)
- export default new Router({
- routes: [
- {
- path:'/num',
- component:Num
- },
- {
- path:'/list',
- component:List
- },
- {
- path:"*",
- redirect:"/num"
- }
- ]
- })
完成后访问 http://localhost:8080/#/list, 即可看到结果
来源: http://www.jb51.net/article/136184.htm