Vue Store使用步骤详解_yarn_招方锁巧

Vue Store 使用步骤详解

一、安装Vuex

要在Vue项目中使用Vuex，首先通过npm或yarn安装Vuex。打开命令行界面，进入项目目录，然后运行以下命令之一：

npm install vuex

或者

yarn add vuex

二、创建Store

创建一个Store文件，通常命名为 store.js，并在其中定义状态（state）、变更状态的方法（mutations）、异步操作的函数（actions）和计算属性（getters）。

// store.js



import Vue from 'vue';



import Vuex from 'vuex';







Vue.use(Vuex);







export default new Vuex.Store({



  state: {



    count: 0



  },



  mutations: {



    increment(state) {



      state.count++;



    }



  },



  actions: {



    incrementAsync({ commit }, number) {



      setTimeout(() => {



        commit('increment', number);



      }, 1000);



    }



  },



  getters: {



    doubledCount(state) {



      return state.count  2;



    }



  }



});

三、在Vue实例中注册Store

在Vue项目的入口文件（通常是 main.js）中引入Vuex，并注册Store。

// main.js



import Vue from 'vue';



import App from './App.vue';



import store from './store'; // 引入store







new Vue({



  store, // 注册store



  render: h => h(App)



}).$mount('app');

四、在组件中使用Store

现在你可以在Vue组件中访问和使用Store了。

五、模块化Store

对于大型项目，可以考虑将Store模块化。

// modules/mutations.js



export const increment = 'increment';







// modules/actions.js



export const incrementAsync = 'incrementAsync';







// store.js



import mutations from './modules/mutations';



import actions from './modules/actions';







export default new Vuex.Store({



  // ...



  mutations,



  actions,



  // ...



});

六、持久化Store

为了将Store的状态持久化到本地存储，可以使用Vuex插件。

// plugins/persistedState.js



export default store => {



  store.subscribe((mutation, state) => {



    localStorage.setItem('store', JSON.stringify(state));



  });



  const savedState = localStorage.getItem('store');



  if (savedState) {



    store.replaceState(JSON.parse(savedState));



  }



};

然后在main.js中引入并使用这个插件：

// main.js



import plugins from './plugins/persistedState';







new Vue({



  store: new Vuex.Store({



    // ...



  }),



  plugins



}).$mount('app');

使用Vue Store主要包括安装Vuex、创建并配置Store、在Vue实例中注册Store以及在组件中使用Store。通过这些步骤，你可以有效地管理Vue应用的状态，提高开发效率和代码的可维护性。